我是新手,已经做好了数据库相关的设计,现在就差界面了。
我心里有自己想要完成的设计,但不知道怎么实现。
大体上是这样的:
浏览器最上面10-20%是logo和背景
然后左边20%是超链接列表,右边80%是点击左边的超链接出现的网页。
!!!!!!!
我不知道该怎么实现啊!!!!!!而且列表标签我不知道怎么以有背景的形式呈现啊,每次呈现都是 ·xxxxx
我试过将w3c的源代码复制到我的编译器上,然后编译出来完全都没有背景图啊,就仅仅是列表。
到网上找个网站参考一下。
楼主就当我看不懂中文吧,,,能把你的需求做出图片需求进行说明不。。。。
大哥,你倒是来个大概图啊,草图也可以,用铅笔画的也可以。
至少这样才能给你弄个大概的布局。
不知道是不是中文学得好,大概写了一个。效果如下:
代码如下[用了bootstrap,你可以参考:http://www.bootcss.com]:
<!DOCTYPE html><html xmlns:form="http://www.w3.org/1999/html"><head lang="en"> <meta charset="UTF-8"> <title>申请管理</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <style type="text/css"> .left { width: 80px; float: left; background-color: #cccccc; } </style></head><body><header class="page-header"> 这里是头部</header><div class="container left"> <nav class="text-center"> <ul class="list-unstyled"> <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li> <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li> <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li> <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li> <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li> <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li> <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li> <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li> <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li> <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li> <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li> <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li> <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li> <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li> <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li> <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li> <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li> <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li> <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li> <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li> <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li> <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li> <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li> <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li> <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li> <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li> <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li> </ul> </nav></div><div class="container-fluid"> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" name="rightcontent" src="about:blank"></iframe> </div></div><footer> 这是底部文本</footer></body></html>
新手的优先要做的就是学习
一股浮躁之气
不知道是不是中文学得好,大概写了一个。效果如下:
代码如下[用了bootstrap,你可以参考:http://www.bootcss.com]:
<!DOCTYPE html><html xmlns:form="http://www.w3.org/1999/html"><head lang="en"> <meta charset="UTF-8"> <title>申请管理</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <style type="text/css"> .left { width: 80px; float: left; background-color: #cccccc; } </style></head><body><header class="page-header"> 这里是头部</header><div class="container left"> <nav class="text-center"> <ul class="list-unstyled"> <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li> <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li> <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li> <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li> <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li> <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li> <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li> <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li> <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li> <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li> <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li> <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li> <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li> <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li> <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li> <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li> <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li> <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li> <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li> <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li> <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li> <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li> <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li> <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li> <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li> <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li> <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li> </ul> </nav></div><div class="container-fluid"> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" name="rightcontent" src="about:blank"></iframe> </div></div><footer> 这是底部文本</footer></body></html>
嗯,加油,不过下次发帖还是有个图比较方便。
不知道是不是中文学得好,大概写了一个。效果如下:
代码如下[用了bootstrap,你可以参考:http://www.bootcss.com]: