谁能告诉我做网页界面的大体思路啊？_html/css

谁能告诉我做网页界面的大体思路啊？_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:42:46

原创

1597人浏览过

我是新手，已经做好了数据库相关的设计，现在就差界面了。
我心里有自己想要完成的设计，但不知道怎么实现。
大体上是这样的：
浏览器最上面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]：

谢谢就是这样我好好研究研究你的代码