HTML和CSS实例讲解

在上面出现UL,li，在讲一下ul,li：

ul  li无序列表标签：

1、ul和li都独占一行空间

2、ul标签与上下文之间有较大的间距

3、上阵不离父子兵（ul li必须一起使用）

4、li前面有个修饰的点（列表样式）

5、li有文本缩进现象

在下面把网页的内容也给加上：

讲到这里，headed一大块的HTML已经讲完了，大家按F12出来的网页肯定和网页的实际效果不一样，所以要把相应的css部分属性写完！

在上面相应的标签类的属性进行对于块进行命名了

当然我教大家写CSS是直接写在head里面啦,下面来介绍一下CSS：

1.利用书写CSS

推荐：在标签中使用标签

2、利用style属性来书写CSS，在每一个标签内都有style属性

3、外部调用CSS?????

现在开始CSS之旅吧

首先我们要重置标签,下面是我们本次实例当需要重置的标签，在所有的网页当中都会有重置标签：

/*重置，清理不干净的标签*/

*{ font-size:12px; font-family:"宋体"; color:#444;margin:0 auto;}/*是共用的意思*/

body{ margin:0; background:#161616;}

a{ text-decoration:none; display:block; color:#FFF;}

img{ border:none; display:block}

ul li{list-style:none; margin:0; padding:0;}

input{ border:none;}

下面来理解一下，下面所出现的内容:

1.“*”的用法，通配符：代表所有标签（每一个标签）

2.同属性定义（多个对象拥有相同的属性），

用逗号分隔对象名进行定义div,h1{color:red;}

优点：代码的优化

关于里面的font-size,font-family,color等都是CSS的常用属性

下面HTML标签a,img,ul li,input是本实例中都会有用到的，标签会有自带修饰，要清理掉！

body的整个网页背景background设置成了单，若是图片就用background-image背景图像  注意用url()指定，background-repeat背景重复，

background-position背景位置

下面来写相应的块的属性

这个思路和下面写HTML是一样的道理！

这个是类headed的说明

/*headed*/

.headed{width:952px;height:140px;} /*这个是块的整体高*/

/*当然这个是headed里面的top左边和右边2个小块*/

.top{height:87px;overflow:hidden;}  /*这个top是指LOGO和top_nav,overflow是溢出的意思，这个就是子级溢出后父级的如何控制溢出部分？注：要把overflow加给父级*/

.top_nav{width:726px;height:87px;float:right;}/*这个是相对测评中心，视频直播等，相对logo就要向右浮动*/

.logo{float:left;}/*logo图片是img相对就要向左浮动*/ 

/*top_right相对于要top的右边导航说明*/

.top_right{width:726px;

  float:right;

          margin-left:7px;}/*相对于top_right父级的定义，里面的内容是宽度和向右浮动，margin-left是向右移动，*/

.top_right a{float:right;

             width:92px;

             height:22px;

    color:#FFF;

    padding-top:10px;}/*相对于top_right的子级A的定义*/

.top_right img{float:left; padding-left:18px;}

.top_right span{ color:#FFF;

                 float:right;

width:52px;

margin-top:4px;}/*相对于top_right子级span的定义*/

.top_right .man{ color:#f88c00;} 

.top_right span:hover{ color:#F93;}  /*span:hover是指相对应的DIV里面的伪类定义（对象的特殊特性说明）

对象：伪类名｛｝a:hover {color:red;}，hover伪类：鼠标经过的效果*/

.login{float:right;height:55px; padding-top:20px;width:726px;}/*是login是登录注册里面向对应，因为在效果图里面是平行，所以在

这里要向右浮动，向上20px,宽度是726和的top_right是一样的宽度，在这里给定义了*/

.login a{float:right; margin-left:5px;}/*相对登录里面的向右浮动，左边距是5PX,若是没有浮动出现，直接出现成列表形式*/

关于这一部分就不多说明，大家应该多少可以看明白了！

主要是做nav来说明，具体的图片如：

.nav{width:952px;height:102px;}/*下面导航，在这里其实大家可以针对实际效果图来做*/

.navleft{ float:left;width:400px; }

.navleft ul{ padding-left:0; list-style:none; margin-left:0;}/*这个主要清除UL里面的包含的其它的效果，当没有这样的时*/

.navleft li{float:left; padding-right:30px; padding-top:20px;}

.navleft a{ color:#999;}

.navright{float:right;width:525px; padding-top:20px;}

.navright a{float:right; margin-left:50px;}

.navright img{float:left;}

.buy{ color:#c0973d;}

这就是相对应headed的说明！基本完毕！这个里面对于相关的单词拼写的一些技巧性问题，比如在里面写里面属性的时候，可以自由打个空格，里面

有相应的单词，可以自己来选！

当自己写的时候有问题，建议大家给全部重新删了，在重新写，你就知道自己问题所错的地方在哪儿，也可以自己慢慢给自己找出自己出的问题在哪儿

，这样是学习进步最快的！

上面写完，显示的具体如下效果！如图

下面开始写产品这一块！

这一块是的最简单一个，这里是直接写在product里面的这一大块里面，直接在

具体如下 ：

相应的CSS就更简单了，如下：

/*产品系列展示*/

.product a{ padding-bottom:40px;}

在效果图里面每个底边边距是40像素，是直接设置为40像素。

这一块大家自行写完了就可以自己在浏览器里面预览了！不多说了！这个是最简单的

最后一块就是页脚

这一大块被我分成了三小块，主要是左中右三部分，左中右分别是footer_left,footer_middle,footer_right，不用看大家也明白了吧！

在HTML里面是这样写的：

关于input输入标签的意思

说明一下在里面是解释说明的意思，方便自己看和以后修改！

在这里我就不多说，大家慢慢去理解消化了。其实呢已经很简单了！

相应的CSS的属性如下：

.footer{height:154px; width:952px; margin-top:25px}

.footer_left{width:173px; height:153px;float:left; }

.footer_left input{ background:#282828; width:147px; height:24px;}

.footer_left .mail{float:right;}

.footer_middle{  float:left; width:640px;

.footer_first {width:480px;}

.footer_first a{ float:left; width:80px; border-right:1px solid #FFF;color:#FFF;}

.footer_first span{  margin-left:14px;color:#FFF;}

.footer_vip{ float:left;}

.footer_vip a{ padding-left:15px; float:left;}

.footer_vip span{ color:#FFF;}

.footer_vip img{float:right;}

.footer_phone {width:480px; text-align: center; height:12px; padding-top:14px;} 

.footer_phone {margin-top:10px;}

.footer_copyright p{ padding-top:24px; text-align:center;}

.footer_right{ float:right;}

这下基本上是全部完成！按F12可以直接在网页里面浏览！

HTML和CSS代码呢其实不难，兴趣是建在会的基础上的！

附件会附上所写的HTML和CSS代码，欢迎前来一起学习讨论！

代码附件：

链接：http://pan.baidu.com/s/1pLbYAhX 密码：fm8g