html实战-制作静态网页

教程视频：http://edu.csdn.net/course/detail/535 从42开始

制作的网页：http://www.cnos.co/

整体思路：

先布局再CSS控制

骨架搭好了，初始化样式，

后再弄CSS样式。注意：将CSS的样式导入到外部样式表时，要注意图片的位置，以及

对外部样式表的引入

1、头部的背景图片的高度128px来自素材的图片高，容器的宽度大小也来自图片

的宽，那么这里背景图片设置的有意思吗？不设置效果一样呀！！

2、图片的位置：当你在编写index.html页面代码时，出现一些图片路径时，那么

先分清楚哪些是同级目录文件

我现在在操作首页实战.html，里面有图片1的路径，从上面可以看出首页实战.html和img文件夹为同级的目录，则路径应该写为:img/1.jpg

效果图

<!DOCTYPE html>

<html>

<head>

#container{

width:1002px;

background-color:gray;

}

#header{

height:120px;

background-color: aquamarine;

}

#main{

height: 600px;

background: darkgoldenrod;

}

#footer{

height: 120px;

background: yellowgreen;

}

#main-left{

float: left;

background: yellow;

width: 700px;

height: 100%;

}

#main-right{

float: right;

background: pink;

width: 302px;

height:100% ;

}

</style>

</head>

<body>

</div>

</div>

</body>

</html>

注意：这里对id为main的div里面的子div main-left和main-right设置浮动样式时，要设置宽和高不然不起作用(起单独一个宽或者高也不起作用，这里的背景颜色只是父div的背景颜色)。可能的原因是div里面没内容，没长和宽，自然不会显示背景颜色

3、当一个div包含两个左右浮动的div并且后面接个普通的div时

</div>

</div>

</div>

因为两个浮动的div浮在水面上，但是父div(即id为main的div)没有高度所以没把父div撑开。Footer的div会在水平面上，所以加背景颜色和height后可以看到此div在这两个浮动div下面，要使footer的div呈现在下面并且不被覆盖，

第一种方法：给main的div加height：800px；让他撑开

第二种方法：在两个浮动div后面加上一个class为cl的div，样式为clear：both；

网页制作的初步完成：

Html代码：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</ul>

</div>

</div>

<h2>电子商务类网站建设</h2>

<ul>

<li><a href="#">方便的货物管理</a></li>

<li><a href="#">自定义会员类型</a></li>

<li><a href="#">在线支付功能</a></li>

<li><a href="#">丰富的订单统计</a></li>

<li><a href="#">财务报表生成</a></li>

</ul>

</div>

<h2>电子商务类网站建设</h2>

<ul>

<li><a href="#">方便的货物管理</a></li>

<li><a href="#">自定义会员类型</a></li>

<li><a href="#">在线支付功能</a></li>

<li><a href="#">丰富的订单统计</a></li>

<li><a href="#">财务报表生成</a></li>

</ul>

</div>

<h2>电子商务类网站建设</h2>

<ul>

<li><a href="#">方便的货物管理</a></li>

<li><a href="#">自定义会员类型</a></li>

<li><a href="#">在线支付功能</a></li>

<li><a href="#">丰富的订单统计</a></li>

<li><a href="#">财务报表生成</a></li>

</ul>

</div>

<h2>电子商务类网站建设</h2>

<ul>

<li><a href="#">方便的货物管理</a></li>

<li><a href="#">自定义会员类型</a></li>

<li><a href="#">在线支付功能</a></li>

<li><a href="#">丰富的订单统计</a></li>

<li><a href="#">财务报表生成</a></li>

</ul>

</div>

</div>

<li><a href="#">这是一篇好文章1</a></li>

<li><a href="#">这是一篇好文章2</a></li>

<li><a href="#">这是一篇好文章3</a></li>

<li><a href="#">这是一篇好文章4</a></li>

<li><a href="#">这是一篇好文章5</a></li>

</ul>

</div>

</div>

</ul>

</div>

</body>

</html>

样式代码：

#container {

margin: 0 auto;

width: 1002px;

}

#header {

height: 128px;

background: gray url(../img/top_bg.jpg) no-repeat;

}

#nav li {

float: left;

/*1、让导航横向*/

/*background: purple; */

/*2、将导航撑开*/

width: 90px;

margin-right: 1px;

}

#nav a {

font-size: 16px;

font-family: "微软雅黑";

color: #363636;

/*8、文字颜色*/

display: block;

/*5、鼠标移动上去后背景颜色局限在a标签内容中*/

height: 37px;

/*6、这些高度都有规定的*/

width: 90px;

text-align: center;

/*7 、让文字居中*/

}

#nav a:hover {

/*3、鼠标放上来后变的样式*/

color: white;

background: url(../img/nav_on.gif);

/*4、鼠标移动后的背景颜色*/

}

#banner{

margin: 10px 0;

}

#main{

/*height: 800px; */ /* 9、撑开*/

}

.subtitle{

height: 37px;

background: url(../img/index_main_top_bg.gif); /*14对原先设置的背景颜色进行更改*/

}

.subtitle img{

float: left; /*10将初始化的图片左浮动*/

margin: 5px 0 0 10px; /*11对图片进行微调*/

}

.subtitle h1{

float:left;

font-size: 16px; /*12对标题中字体进行设置*/

font-family: "微软雅黑",simhei,sans-serif;

margin-left:10px;

}

.subtitle a{

float: right;

font-size: 12px; /*13对超链接进行微调*/

color: gray;

}

.four{

width: 326px;

height: 200px;

background: #EEE; /*这里将原先的背景改成其他的颜色(用QQ截图下面有显示RGB的颜色,这里只是转换成16进制)*/

float: left;

margin: 10px;

}

.four h2{

font-size: 16px;

font-family: "微软雅黑";

margin: 6px 0 6px 10px; /*16将h2标题做做修改*/

}

.four img{

float: left; /*11、让class为four标签的img左浮动*/

margin-left: 10px; /*15图片背后有背景颜色为白色*/

padding: 6px;

background: white;

}

.four ul{

float: left;

margin-left: 10px;

}

.four li{

background: url(../img/service_intro_bg.gif) no-repeat; /*16标签前面的小黑点*/

padding-left: 10px; /*17小黑点在字的下面*/

height: 20px;

}

.four a{

color: gray; /*18a标签的颜色*/

}

#lside{

height: 480px;

width: 694px;

border: 1px solid #EEE;

float: left; /*8、让左右两个div并列一起*/

/*background: cornflowerblue;*/ /*这里设置是来区分9*/ /*19删除背景图*/

border-top: none;

}

#rside{

/*height: 600px;*/

width: 294px;

/*border:1px solid gray;*/

float: right; /*让左右两个div并列一起*/

/*background: greenyellow; */ /*这是一整个大的div到后面设置的话这个要去掉了*/

}

#art{

background: #EEE;

margin-top: 1px;

padding-top:10px;

}

#art a{

display: block;

background: url(../img/article_head.gif) no-repeat;

height: 29px;

padding-left: 30px;

}

#art a:hover{

background: url(../img/article_on_bg.gif); /*鼠标移动到文章标题后的背景*/

}

#contact{

margin-top: 1px;

height: 250px;

background: #EEE;

}

#footer{

height: 120px;

/*background: gray;*/

clear:both; /* 9、撑开*/

margin-top: 20px;

}

#footer ul{

height: 40px;

background: #EEE;

}

#footer li{

float: left;

margin-top: 15px;

margin-right: 10px;

}

#footer address{

font-family: "微软雅黑",sans-serif;

font-size:10px;

margin-top: 15px;

}

最后完美的：

HTML代码：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</ul>

</div>

</div>

<h2>电子商务类网站建设</h2>

<ul>

<li><a href="#">方便的货物管理</a></li>

<li><a href="#">自定义会员类型</a></li>

<li><a href="#">在线支付功能</a></li>

<li><a href="#">丰富的订单统计</a></li>

<li><a href="#">财务报表生成</a></li>

</ul>

</div>

<h2>电子商务类网站建设</h2>

<ul>

<li><a href="#">方便的货物管理</a></li>

<li><a href="#">自定义会员类型</a></li>

<li><a href="#">在线支付功能</a></li>

<li><a href="#">丰富的订单统计</a></li>

<li><a href="#">财务报表生成</a></li>

</ul>

</div>

<h2>电子商务类网站建设</h2>

<ul>

<li><a href="#">方便的货物管理</a></li>

<li><a href="#">自定义会员类型</a></li>

<li><a href="#">在线支付功能</a></li>

<li><a href="#">丰富的订单统计</a></li>

<li><a href="#">财务报表生成</a></li>

</ul>

</div>

<h2>电子商务类网站建设</h2>

<ul>

<li><a href="#">方便的货物管理</a></li>

<li><a href="#">自定义会员类型</a></li>

<li><a href="#">在线支付功能</a></li>

<li><a href="#">丰富的订单统计</a></li>

<li><a href="#">财务报表生成</a></li>

</ul>

</div>

</div>

<li><a href="#">这是一篇好文章1</a></li>

<li><a href="#">这是一篇好文章2</a></li>

<li><a href="#">这是一篇好文章3</a></li>

<li><a href="#">这是一篇好文章4</a></li>

<li><a href="#">这是一篇好文章5</a></li>

</ul>

</div>

</div>

</ul>

</div>

</body>

</html>

CSS代码：

#container {

margin: 0 auto;

width: 1002px;

}

#header {

height: 128px;

background: gray url(../img/top_bg.jpg) no-repeat;

}

#nav li {

float: left;

/*1、让导航横向*/

/*background: purple; */

/*2、将导航撑开*/

width: 90px;

margin-right: 1px;

}

#nav a {

/*font-size: 16px;

font-family: "微软雅黑";

line-height:37px ; /*让导航内容居中*/

font:16px/37px "微软雅黑",'黑体',sans-serif; /*可以简写为下面的,可以少写，但要有顺序*/

color: #363636;

/*8、文字颜色*/

display: block;

/*5、鼠标移动上去后背景颜色局限在a标签内容中*/

height: 37px;

/*6、这些高度都有规定的*/

width: 90px;

text-align: center;

/*7 、让文字居中*/

}

#nav a:hover {

/*3、鼠标放上来后变的样式*/

color: white;

background: url(../img/nav_on.gif);

/*4、鼠标移动后的背景颜色*/

}

#banner{

margin: 10px 0;

}

#main{

/*height: 800px; */ /* 9、撑开*/

}

.subtitle{

height: 37px;

background: url(../img/index_main_top_bg.gif); /*14对原先设置的背景颜色进行更改*/

line-height: 37px;

}

.subtitle img{

float: left; /*10将初始化的图片左浮动*/

margin: 5px 0 0 10px; /*11对图片进行微调*/

}

.subtitle h1{

float:left;

font-size: 16px; /*12对标题中字体进行设置*/

font-family: "微软雅黑",simhei,sans-serif;

margin-left:10px;

}

.subtitle a{

display: block;

float: right;

font-size: 12px; /*13对超链接进行微调*/

color: #888;

line-height: 37px;

}

.four{

width: 326px;

height: 200px;

background: #EEE; /*这里将原先的背景改成其他的颜色(用QQ截图下面有显示RGB的颜色,这里只是转换成16进制)*/

float: left;

margin: 10px;

}

.four h2{

color: #A0A0A0; /*字体颜色微调*/

font-size: 16px;

font-family: "微软雅黑";

margin: 6px 0 6px 10px; /*16将h2标题做做修改*/

}

.four img{

float: left; /*11、让class为four标签的img左浮动*/

margin-left: 10px; /*15图片背后有背景颜色为白色*/

padding: 6px;

background: white;

}

.four ul{

float: left;

margin-left: 10px;

}

.four li{

background: url(../img/service_intro_bg.gif) no-repeat; /*16标签前面的小黑点*/

padding-left: 10px; /*17小黑点在字的下面*/

height: 20px;

}

.four a{

color: #888; /*18a标签的颜色*/

}

.four a:visited{

color: #808080;

}

.four a:hover{

color: #FF832C;

}

#lside{

height: 480px;

width: 694px;

border: 1px solid #EEE;

float: left; /*8、让左右两个div并列一起*/

/*background: cornflowerblue;*/ /*这里设置是来区分9*/ /*19删除背景图*/

border-top: none;

}

#rside{

/*height: 600px;*/

width: 294px;

/*border:1px solid gray;*/

float: right; /*让左右两个div并列一起*/

/*background: greenyellow; */ /*这是一整个大的div到后面设置的话这个要去掉了*/

}

#art{

background: #EEE;

margin-top: 1px;

padding-top:10px;

}

#art a{

color: #888;

display: block;

background: url(../img/article_head.gif) no-repeat;

height: 29px;

line-height:29px ;

padding-left: 30px;

}

#art a:hover{

color:#FF832C;

background: url(../img/article_on_bg.gif); /*鼠标移动到文章标题后的背景*/

}

#contact{

margin-top: 1px;

height: 250px;

background: #EEE;

}

#footer{

height: 120px;

/*background: gray;*/

clear:both; /* 9、撑开*/

margin-top: 20px;

}

#footer ul{

height: 40px;

background: #EEE;

}

#footer li{

float: left;

margin-top: 15px;

margin-right: 10px;

}

#footer address{

font-family: "微软雅黑",sans-serif;

font-size:10px;

margin-top: 15px;

}

#footer a:visited{

color: #808080;

}

#footer a:hover{

color: #FF832C;

}

html实战-制作静态网页相关推荐

html静态网页制作的博客,[推荐]初学制作静态网页HTML推荐标准_
[推荐]初学制作静态网页HTML推荐标准_ (2012-05-19 10:46:32) 标签: 网页制作杂谈 a双定义一个链接name=text 本网页内目标名称(书签),可为数字或文本href ...
jsp网页制作html页面,JSP制作静态网页.ppt
JSP制作静态网页 JSP制作静态网页主要内容 1 制作网站的原型 2 制作注册页面 2.1 HTML的常用标签 2.2 CSS简介 2.3 使用HTML+CSS制作注册页面 2.4 JavaScr ...
1、制作静态网页，用于个人信息的提交前验证。
1.制作静态网页,用于个人信息的提交前验证. 内容要求: 1. 编写一个静态页面,用于填写个人的基本信息,包含姓名.性别.年龄.民族.身份证号.家庭住址.上传1张个人照片(可用其他图片代替),页面下方 ...
利用html标记制作静态网页,使用HTML制作网页《静态网页制作》.ppt
使用HTML制作网页<静态网页制作> 表单的执行原理 Internet 1 2 客户端:请求登录,通过表单填写账户信息服务器端:验证发来的账号信息,然后给出反馈客户端和服务器类似两人沟 ...
第二十八篇网页实战之静态网页爬取，四大案例，小说，书，图片等抓取操作
心得:不知道从什么时候开始,喜欢上了思考,完全可以把自己沉浸在自己的程序中,看着自己一点点的累积,慢慢的成长,证明这一天没有白白浪费掉,感谢还在认真的你. 自己在学习过程中总结出来的爬虫的过程: 1. ...
静态网页制作作业_HTML CSS复习之制作静态网页
这一周我先是复习了一些基础的布局,下面是比较常用的几种基本布局: 左边aside部分左浮动,右边content部分也左浮动,两个部分无空隙左边aside部分左浮动,右边content部分右浮动然后 ...
在ubuntu20.04下搭建lamp环境并制作静态网页
1.准备工作配置虚拟机安装ubuntu20.04 配置环境及相关设置(配置中文及防火墙等) 提示:详细安装方法参考B站up @Mrico_Frank 2.安装apache2 Apache HTTP服 ...
在 ubuntu20.04下搭建 lamp 环境并制作静态网页
1.准备工作配置虚拟机安装ubuntu20.04 配置环境及相关设置(配置中文及防火墙等) 提示:详细安装方法参考B站up @Mrico_Frank 2.安装apache2 Apache HTTP服 ...
html语言区别大小写吗,用HTML语言制作静态网页基础问题1.标注是否区分大小写？2.下爱问知识人...
C. UBB语法论坛可以由管理员设置是否支持UBB标签,UBB标签就是不允许使用HTML语法的情况下,通过论坛的特殊转换程序,以至可以支持少量常用的.无危害性的HTML效果显示.以下为具体使用说明: ...

html实战-制作静态网页

html实战-制作静态网页相关推荐

最新文章

热门文章