用div+css制作网页界面
2013-04-25 23:39
363 查看
用div+css制作网页界面
这次我的任务是制作百度界面，之前我已经做过一个基本一样的百度，但是用的是纯<p>标签，这种方法比较简单，也不太适合比较复杂的界面或不能精确制作。所以，这次我用div+css精确地制作了一个百度界面，这种方法是做网页前台必要的，必须得了解。这次通过几位学长的指导，感觉受益颇多，所以记录下来。因为前一篇博客我写过制作网页的一些基础知识，所以这次，我就不一一介绍，若你想了解一下我之前的介绍的基础知识点，可以在进去看看http://blog.csdn.netu010010102/article/details/8801434，这次写博客目的是将知识点再升华点高度。
之前的任务，我用的是<p>标签，完成整个项目的，但是,<p>标签并不能精确定义位置及字体大小颜色等功能，所以这次我改用<div>标签解决这个问题，并且结合CSS对文字及位置等进行准确定义。
这次我就不一一介绍每一行的语法及作用，我主要介绍一些我在做任务时认为的比较重要的知识点，各位若有不解之处，欢迎各位提出，我定将竭力帮你解决。谢谢！！！
以下是我总结知识点：
1、每一个<div>标签都得定义一个name、id或class，以备修改或调用。调用之后就用CSS进行各种设置；
例：<div id="one">这里是你要添加在这个标签里的内容</div>
#one{
font-size:12px;
color:#0000FF;
text-align:right;
}
(注：整个项目可以先用html将整个界面大概做出，之后便可以将所有CSS放置在一起，这样以便以后的修改。但是，所有的标签都必须放在样式标签中，即：<style type="text/css">你要写的CSS内容</style>)
2、<div id="one">
<ul>
<li>注册</li>
<li>登入</li>
<li>|</li>
<li>搜索设置</li>
</ul>
</div>
这是其中一个id="one"的<div>标签里的内容，只是用<li>时，每小块内容会分行显示，加入<ul>标签之后就不会了
#one li{
float:right;
margin-right:5px;
}
这是其对应的css设置，注意此比一般的<div>标签多了一个“li”，大括号里的设置格式还是同<div>标签一样的。另外，由于引用了“float”，所以其中的<div>内添加的内容会倒置，所以记得将所有内容反过来写。（就像此处在用浏览器打开后的结果顺序是“搜索设置、登入、注册”）
3、<a href="http://tieba.baidu.com/index.html">贴吧</a>
这是一个链接的示例，链接的标签为<a>其中的语法表示为<a href="这里是你要链接的网址">贴吧</a>,用浏览器打开后，单击“贴吧”后，这个网页就会跳转到贴吧的网站。
4、其实网页上显示出来的内容可以不用标签包含来使用，完全可以单独裸露的写，只是用标签包含后易于CSS管理。
例：<a href="http://e.baidu.com/?refer=888">加入百度推广</a>
|
<a href="http://top.baidu.com/">搜索风云榜</a>
|
<a href="http://home.baidu.com/">关于百度</a>
|
<a href="http://ir.baidu.com/phoenix.zhtml?c=188488&p=irol-homeprofile">About
其中的三个符号就没有用标签包含，而是直接使用。
5、一些基础的CSS设置：
（1）color:#0000FF;这是颜色的定义，其中“0000FF”是指蓝色，这是蓝色的代码，可以百度参考“css颜色代码表”查询，也可以直接将“0000FF”用蓝色代替。
（2）text-align:center;此行文本内容居中显示
（3）line-height:25px;上下两行间间距为25像素。
（4）font-size:10px;字体设置为10个像素。
（5）outline:none;这里指的是输入文本框当单击时不会出现边界线。
（6）margin-top:4px;指与上一行间的间距为4个像素。
（7）text-decoration:underline;这里是设置下划线。
（8）float:right;将<ul>标签内所有<li>标签里的内容放置于此行右边。
6、由于我是用NOTEPAD++软件写的代码，在我编写完代码时，打开时出现乱码情况，这时，你可以在NOTEPAD++菜单栏中设置代码的格式，就可以解决问题。
我总结的知识点这次就是这些，以下就是我这次做的项目代码。结合上面的知识点，应该可以看懂，不懂的话，欢迎提出！！！
<html>
<head>
<title>百度一下，你就知道</title>
</head>
<body>
<div id="one">
<ul>
<li>注册</li>
<li>登入</li>
<li>|</li>
<li>搜索设置</li>
</ul>
</div>
<div id="content">
<div id="two">
<img src="2.gif">
</div>
<div id="three">
<a href="http://news.baidu.com/">新闻</a>
<span id="g">
<b>网页</b>
</span>
<a href="http://tieba.baidu.com/index.html">贴吧</a>
<a href="http://zhidao.baidu.com/">知道</a>
<a href="http://music.baidu.com/">音乐</a>
<a href="http://image.baidu.com/">图片</a>
<a href="http://video.baidu.com/">视频</a>
<a href="http://map.baidu.com/">地图</a>
</div>
<div id="four">
<span class="s_ipt_wr">
<input type="text" maxlength="100" style="width:405px;height:32px;"
autocomplete="off">
</span>
<span class="s_btn_wr">
<input type="submit" value="百度一下" class="s_btn"
style="width:100px;height:36px;"onmousedown="this.className='s_btn s_btn_h'"
onmouseout="this.className='s_btn'">
</span>
</div>
<div id="five">
<a href="http://www.baike.baidu.com/">百科</a>
<a href="http://www.wenku.baidu.com/">文库</a>
<a href="http://www.hao123.com/">hao123</a>
|
<a href="http://www.baidu.com/more/">更多>></a>
</div>
<div id="six">
<a href="http://zhidao.baidu.com/topic/yaan/">支持雅安，寻找每一个生命奇迹</a>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="sever">
<div>
<span id="e">
<a href="http://www.baidu.com/cache/sethelp/index.html">把百度设为主页</a>
</span>
<span id="f">
<a href="http://liulanqi.baidu.com/?t=baidu">安装百度浏览器</a>
</span>
</div>
<div>
<a href="http://e.baidu.com/?refer=888">加入百度推广</a>
|
<a href="http://top.baidu.com/">搜索风云榜</a>
|
<a href="http://home.baidu.com/">关于百度</a>
|
<a href="http://ir.baidu.com/phoenix.zhtml?c=188488&p=irol-homeprofile">About
Baidu</a>
</div>
<div>
<a href="http://www.baidu.com/duty/">@2013 Baidu使用百度前必读 京ICP证030173号
<img src="1.gif"></a>
</div>
</div>
</body>
</html>
<style type="text/css">
a{
color:blue;
text-decoration:underline;
}
#one{
font-size:12px;
color:#0000FF;
text-align:right;
}
#one li{
float:right;
margin-right:5px;
}
#two{text-align:center;
}
#three{
font-size:14px;
color:#0000FF;
text-align:center;
letter-spacing:3px;
margin-left:-90px;
}
#four{
text-align:center;
margin-top:4px;
}
#four input{
outline:none;
}
#five{
font-size:14px;
color:#0000FF;
text-align:center;
line-height:80px;
}
#six{
font-size:10px;
color:#0000FF;
line-height:30px;
text-align:center;
}
#sever{
color:#0000FF;
text-align:center;
line-height:25px;
font-size:10px;
}
#g{
color:#000000;
}
#content{
width:1024px;
height:350px;
margin:0 auto;
}
</style>
这是完成后的效果图：
大家可以参考着研究一下，由于我也是新手，所以其中若有不当之处，敬请包含，谢谢！！！
这次我的任务是制作百度界面，之前我已经做过一个基本一样的百度，但是用的是纯<p>标签，这种方法比较简单，也不太适合比较复杂的界面或不能精确制作。所以，这次我用div+css精确地制作了一个百度界面，这种方法是做网页前台必要的，必须得了解。这次通过几位学长的指导，感觉受益颇多，所以记录下来。因为前一篇博客我写过制作网页的一些基础知识，所以这次，我就不一一介绍，若你想了解一下我之前的介绍的基础知识点，可以在进去看看http://blog.csdn.netu010010102/article/details/8801434，这次写博客目的是将知识点再升华点高度。
之前的任务，我用的是<p>标签，完成整个项目的，但是,<p>标签并不能精确定义位置及字体大小颜色等功能，所以这次我改用<div>标签解决这个问题，并且结合CSS对文字及位置等进行准确定义。
这次我就不一一介绍每一行的语法及作用，我主要介绍一些我在做任务时认为的比较重要的知识点，各位若有不解之处，欢迎各位提出，我定将竭力帮你解决。谢谢！！！
以下是我总结知识点：
1、每一个<div>标签都得定义一个name、id或class，以备修改或调用。调用之后就用CSS进行各种设置；
例：<div id="one">这里是你要添加在这个标签里的内容</div>
#one{
font-size:12px;
color:#0000FF;
text-align:right;
}
(注：整个项目可以先用html将整个界面大概做出，之后便可以将所有CSS放置在一起，这样以便以后的修改。但是，所有的标签都必须放在样式标签中，即：<style type="text/css">你要写的CSS内容</style>)
2、<div id="one">
<ul>
<li>注册</li>
<li>登入</li>
<li>|</li>
<li>搜索设置</li>
</ul>
</div>
这是其中一个id="one"的<div>标签里的内容，只是用<li>时，每小块内容会分行显示，加入<ul>标签之后就不会了
#one li{
float:right;
margin-right:5px;
}
这是其对应的css设置，注意此比一般的<div>标签多了一个“li”，大括号里的设置格式还是同<div>标签一样的。另外，由于引用了“float”，所以其中的<div>内添加的内容会倒置，所以记得将所有内容反过来写。（就像此处在用浏览器打开后的结果顺序是“搜索设置、登入、注册”）
3、<a href="http://tieba.baidu.com/index.html">贴吧</a>
这是一个链接的示例，链接的标签为<a>其中的语法表示为<a href="这里是你要链接的网址">贴吧</a>,用浏览器打开后，单击“贴吧”后，这个网页就会跳转到贴吧的网站。
4、其实网页上显示出来的内容可以不用标签包含来使用，完全可以单独裸露的写，只是用标签包含后易于CSS管理。
例：<a href="http://e.baidu.com/?refer=888">加入百度推广</a>
|
<a href="http://top.baidu.com/">搜索风云榜</a>
|
<a href="http://home.baidu.com/">关于百度</a>
|
<a href="http://ir.baidu.com/phoenix.zhtml?c=188488&p=irol-homeprofile">About
其中的三个符号就没有用标签包含，而是直接使用。
5、一些基础的CSS设置：
（1）color:#0000FF;这是颜色的定义，其中“0000FF”是指蓝色，这是蓝色的代码，可以百度参考“css颜色代码表”查询，也可以直接将“0000FF”用蓝色代替。
（2）text-align:center;此行文本内容居中显示
（3）line-height:25px;上下两行间间距为25像素。
（4）font-size:10px;字体设置为10个像素。
（5）outline:none;这里指的是输入文本框当单击时不会出现边界线。
（6）margin-top:4px;指与上一行间的间距为4个像素。
（7）text-decoration:underline;这里是设置下划线。
（8）float:right;将<ul>标签内所有<li>标签里的内容放置于此行右边。
6、由于我是用NOTEPAD++软件写的代码，在我编写完代码时，打开时出现乱码情况，这时，你可以在NOTEPAD++菜单栏中设置代码的格式，就可以解决问题。
我总结的知识点这次就是这些，以下就是我这次做的项目代码。结合上面的知识点，应该可以看懂，不懂的话，欢迎提出！！！
<html>
<head>
<title>百度一下，你就知道</title>
</head>
<body>
<div id="one">
<ul>
<li>注册</li>
<li>登入</li>
<li>|</li>
<li>搜索设置</li>
</ul>
</div>
<div id="content">
<div id="two">
<img src="2.gif">
</div>
<div id="three">
<a href="http://news.baidu.com/">新闻</a>
<span id="g">
<b>网页</b>
</span>
<a href="http://tieba.baidu.com/index.html">贴吧</a>
<a href="http://zhidao.baidu.com/">知道</a>
<a href="http://music.baidu.com/">音乐</a>
<a href="http://image.baidu.com/">图片</a>
<a href="http://video.baidu.com/">视频</a>
<a href="http://map.baidu.com/">地图</a>
</div>
<div id="four">
<span class="s_ipt_wr">
<input type="text" maxlength="100" style="width:405px;height:32px;"
autocomplete="off">
</span>
<span class="s_btn_wr">
<input type="submit" value="百度一下" class="s_btn"
style="width:100px;height:36px;"onmousedown="this.className='s_btn s_btn_h'"
onmouseout="this.className='s_btn'">
</span>
</div>
<div id="five">
<a href="http://www.baike.baidu.com/">百科</a>
<a href="http://www.wenku.baidu.com/">文库</a>
<a href="http://www.hao123.com/">hao123</a>
|
<a href="http://www.baidu.com/more/">更多>></a>
</div>
<div id="six">
<a href="http://zhidao.baidu.com/topic/yaan/">支持雅安，寻找每一个生命奇迹</a>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="sever">
<div>
<span id="e">
<a href="http://www.baidu.com/cache/sethelp/index.html">把百度设为主页</a>
</span>
<span id="f">
<a href="http://liulanqi.baidu.com/?t=baidu">安装百度浏览器</a>
</span>
</div>
<div>
<a href="http://e.baidu.com/?refer=888">加入百度推广</a>
|
<a href="http://top.baidu.com/">搜索风云榜</a>
|
<a href="http://home.baidu.com/">关于百度</a>
|
<a href="http://ir.baidu.com/phoenix.zhtml?c=188488&p=irol-homeprofile">About
Baidu</a>
</div>
<div>
<a href="http://www.baidu.com/duty/">@2013 Baidu使用百度前必读 京ICP证030173号
<img src="1.gif"></a>
</div>
</div>
</body>
</html>
<style type="text/css">
a{
color:blue;
text-decoration:underline;
}
#one{
font-size:12px;
color:#0000FF;
text-align:right;
}
#one li{
float:right;
margin-right:5px;
}
#two{text-align:center;
}
#three{
font-size:14px;
color:#0000FF;
text-align:center;
letter-spacing:3px;
margin-left:-90px;
}
#four{
text-align:center;
margin-top:4px;
}
#four input{
outline:none;
}
#five{
font-size:14px;
color:#0000FF;
text-align:center;
line-height:80px;
}
#six{
font-size:10px;
color:#0000FF;
line-height:30px;
text-align:center;
}
#sever{
color:#0000FF;
text-align:center;
line-height:25px;
font-size:10px;
}
#g{
color:#000000;
}
#content{
width:1024px;
height:350px;
margin:0 auto;
}
</style>
这是完成后的效果图：
大家可以参考着研究一下，由于我也是新手，所以其中若有不当之处，敬请包含，谢谢！！！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 网页制作DIV+css之导航布局
- DIV+CSS制作网页之如何设置z-index
- 转：整理收集的div+css制作网页的一些小实例技巧
- 网页制作中的CSS+DIV：dl,dt,dd分别表示什么意思啊
- div+css制作网页经验技巧集锦
- 网站重构经验之谈：解读Div+CSS网页制作误区
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节
- 使用HTML+CSS+JS制作简单的网页菜单界面
- 网页制作:10个常见DIV+CSS错误总结
- 【转】网页制作中的CSS+DIV：dl,dt,dd分别表示什么意思啊？请说明啊，谢谢有什么功能？
- div+css网页制作
- Photoshop切片制作div+css网页页面
- DIV+CSS网页制作中CLASS和ID的区别
- CSS+DIV 设计一个简单的个人网页界面
- 学习DIV+CSS网页制作的流程及如何学习CSS？
- 新手如何学习DIV+CSS制作前台网页
- 使用DIV+CSS制作网页后，表格Table还有用吗？
- DIV+CSS制作网页之如何设置z-index position:relative
- html静态网页制作中div+css的浅运用
- div+css 制作网页