div-css笔记

div-存放html元素表
css-成叠样式表,制定div内容样式






<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>text2.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->


  </head>
  
  <body>
    <span style="font-size:30px;color:blue">栏目一</span>
     <span style="font-size:10px;color:red;font-style:italic">栏目2</span>
      <span style="font-size:40px;color:green;font-weight:bold">栏目3</span>
       <span style="font-size:20px;color:pink;font-weight:lighter">栏目4</span>
        <span style="font-size:30px;color:black;font-weight:lighter">栏目5</span>
  </body>
</html>




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>text2.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->


  <style type="text/css">
.style1{
font-size:20px;
color:red;
font-weight:bold;
font-style:italic;
text-decoration:underline;
}
</style>
  </head>
  
  <body>
    <span class="style1">栏目一</span><br/>
     <span class="style1">栏目2</span><br/>
      <span class="style1">栏目3</span><br/>
       <span class="style1">栏目4</span><br/>
        <span class="style1">栏目5</span><br/>
  </body>
</html>




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>text2.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    
黑白照片
<style type="text/css">
    img {
    filter:gray;
    }
</style>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  </head>
  
  <body>
    <img src="image/aa.jpg"/>
    <img src="image/aa.jpg"/><br/>
     <img src="image/aa.jpg"/><br/>
    
  </body>
</html>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>text2.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    


<style type="text/css">
    a:link img {
    filter:"gray";
    }
    a:hover img{
    filter:"";
    }
</style>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  </head>
  
  <body>
    <a  href="#"><img src="image/aa.jpg"/></a>
    <a  href="#"><img src="image/aa.jpg"/></a>
     <a  href="#"><img src="image/aa.jpg"/></a>
    
  </body>
</html>




/*.style1类选择器*/
.style1{
font-weight:bold;
font-size:20px;
background-color:pink;
}
/*style2是id选择器*/
#style2{
font-size:30px;
background-color:silver;
}
在html引用id选择器,则<元素 id=""></元素>


html元素;
/*html的选择器*/
body{
color:orange;

}
a:link{
color:black;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
a:visited{
color:red;
}




结论:当选择器都有时:id  >类  >html  ;


/*使用通配符选择器,对内边距和外边据清0*/
*{
margin:0px;
/*margin-top:10px;*/
padding:0px;
}
margin:0px 10px 8px 8x;
如果margin有4个值则表示上右下左


如果margin有3个值则表示上 左右 下
padding也可有四个值,跟margin一样
/*父子选择器*/
#style2 span{
font-style:italic;
color:red;
}
也可以重复
#style2 span span{
font-style:italic;
color:red;
}
子选择器是html识别标志
父子选择器适用于id 选择器 lei选择器


id > 类 > html;


<span class="style1 style4">新闻3</span> <br>
冲突在于  style1 style4类选择器<css中谁在前>写
引用多个类选择器 


公共部分提出
.style1, .style2,.style3
{
}




12讲


块元素与行内元素
行内元素(内联元素)只能容纳文本或者其他内联元素,常见<span> <a>


块元素
块元素一般从新行,可以容纳文本,其他内联元素和块元素
占满一行,常见<div> <p>


块元素与行内元素转换
display:block;
display:inline;


13讲



标准流:在网页布局中,写在前面的,出现在前面,默认布局方式;
非标准流:


css盒子模型:
原理图:盒子模型.jpg
1,html元素都可以看成一个盒子,
2,盒子模型的参照物不一样,则使用的css属性不一样,比如div1的角度看,是
margin-right,从div2看,则是margin-left;
3,如果不希望破坏外观,尽量使用margin,因为padding 会改变盒子的大小,相当于盒子有弹性
,margin如果过大,内容会挤到外面;


14讲


盒子案例box2.html


  <body>
    <div class="div1">
   
    <ul class="faceul">
     <li><img src="image/a1.jpg"/><a href="#">cghc</a></li>
     <li><img src="image/a1.jpg"/></li>
     <li><img src="image/a1.jpg"/></li>
     <li><img src="image/a1.jpg"/></li>
     <li><img src="image/a1.jpg"/></li>
     <li><img src="image/a1.jpg"/></li>
     <li><img src="image/a1.jpg"/></li>
     <li><img src="image/a1.jpg"/></li>
    </ul>
    
    </div>
  </body>
box2.css
body{
margin:0px;//到顶
padding:0px;
}
.div1{
width:500px;
height:300px;
border:1px solid #b4b4b4;
margin-left:250px;
margin-height:20px;
}
.faceul{
width:180px;
height:250px;
border:1px solid red;
list-style-type:none;//对ul进行无处理,去掉标点
padding:0px;//去掉填充
margin-left:150px;
}
.faceul a{
margin-left:5px;
}
a:link{
text-decoration:none;
}
a:hover{
text-decoration:underline;
color:black;
}
.faceul li{
width:50px;
height:70px;
border:1px solid blue;
float:left;
margin-left:5px;
margin-top:5px;
}
.faceul img{
        width:40px;
margin-left:5px;
margin-top:5px;
}




优酷案例youku.html
 <body>
   <div class="div1">
     <div>
     <span class="span1"><font class="font1">油库牛人</font><a href="#">更多牛人</a></span>
     <ul class="faceul">
     <li><img src="image/a1.jpg"/><br/><a href="#">张三</a></li>
      <li><img src="image/a1.jpg"/><br/><a href="#">张三</a></li>
       <li><img src="image/a1.jpg"/><br/><a href="#">张三</a></li>
     </ul>
     </div>
      <div>
     <span class="span1"><font class="font1">油库牛人</font><a href="#">更多牛人</a></span>
     <ul class="faceul">
     <li><img src="image/a1.jpg"/><br/><a href="#">张三</a></li>
      <li><img src="image/a1.jpg"/><br/><a href="#">张三</a></li>
       <li><img src="image/a1.jpg"/><br/><a href="#">张三</a></li>
     </ul>
     </div>
      <div>
     <span class="span1"><font class="font1">油库牛人</font><a href="#">更多牛人</a></span>
     <ul class="faceul">
     <li><img src="image/a1.jpg"/><br/><a href="#">张三</a></li>
      <li><img src="image/a1.jpg"/><br/><a href="#">张三</a></li>
       <li><img src="image/a1.jpg"/><br/><a href="#">张三</a></li>
     </ul>
     </div>
   </div>
  </body>
youku.css
body{
margin:0 auto;
width:1000px;
height:1000px;
border:1px solid red;
}
.div1{
width:350px;
height:350px;
border:0px solid gray;

}
.font1{
font-weight:bold;//粗体
font-size:20px;
margin:2px 0 0 2px;
}
.span1{
/*background-color:pink;*/
display:block;//块处理
}
.span1 a{
float:right;
}
.faceul{
width:350px;
height:65px;
/*background-color:#00ff00;*/
list-style-type:none;/*去标点*/
padding:0px;
}
.faceul li{
float:left;
width:107px;
height:78px;
/*background-color:pink;*/
margin-left:6px;
text-align:center;/*表示放在该元素的其他元素左右居中*/
}
.faceul img{
margin-top:4px;
width:75px;
height:55px;
padding-botton:1px;/*将文字与图片分开*/
}
/*定义几种样式*/
a:link{
text-decoration:none;
}


a:hover{
text-decoration:underline;
color:black;
}
16讲


浮动


左浮动  右浮动  清楚浮动


定位position:
relative.html


static :标准 对left top无效
relative :/*相对定位*/原来占有空间保留
#special{
position:relative;/*相对定位*/
left:40px;/*在原来位置向右移动大小(向左变为负数)*/
top:100px;/*在原来位置向下移动大小(向上变为负数)*/

}
absolute :/*绝对定位*/原来占有空间不保留
#special2{
position:absolute;/*绝对定位*/
left:40px;/*在离他最近的非标准流不是最近的div ,向右移动大小(向左变为负数)*/
top:100px;/*在离他最近的非标准流,向下移动大小(向上变为负数)*/

}
fixed  :包含块是视图本身
#special3{
position:fixed;/*定位*/
left:40px;/*body ,向右移动大小(向左变为负数)*/
top:100px;/*body,向下移动大小(向上变为负数)*/

}


17讲
div-css总汇和


sohu案例:sohu.html
 <body>
    <div class="top"> <div class="login"><img src="image/mysohu.png"/>
    <input class="text1" type="text" name="username"/><input class="text1" type="password" name="pwd"/>
    <input type="submit" value="登入"/><a href="#">&nbsp;注册</a><a href="#">&nbsp;邮件</a><a href="#">&nbsp;相册</a>
    <a href="#">&nbsp;说两句</a></div>
     <div class="indexpage">设置首页</div>
     <div class="myhref">手机看新闻</div></div>
     
     <div class="logo"><img src="image/sohu.png"/></div>
     <div class="navi">
     <ul class="faceul">
     <li><a href="#">搜狗</a></li>
     <li id="specialli1"><a href="#">输入法</a></li>
     <li id="specialli1"><a href="#">浏览器</a></li>
     <li><a href="#">地图</a></li>
     <li><a href="#">邮件</a></li>
     <li><a href="#">搏客</a></li>
     <li><a href="#">社区</a></li>
     <li id="specialli2"><a href="#">我说两句</a></li>
     <li id="specialli1"><a href="#">微门户</a></li>
     <li id="specialli1"><a href="#">大视野</a></li>
      <li><a href="#">视频</a></li>
     <li><a href="#">游戏</a></li>
     <li id="specialli1"><a href="#">新天龙</a></li>
     <li id="specialli2"><a href="#">狩龙战机</a></li>
     <li id="specialli2"><a href="#">手机搜狐</a></li>
     <li id="specialli2"><a href="#">手机游戏</a></li>
     <li id="specialli1"><a href="#">e购房</a></li>
     
     <li><a href="#">搜狗</a></li>
     <li id="specialli1"><a href="#">输入法</a></li>
     <li id="specialli1"><a href="#">浏览器</a></li>
     <li><a href="#">地图</a></li>
     <li><a href="#">邮件</a></li>
     <li><a href="#">搏客</a></li>
     <li><a href="#">社区</a></li>
     <li id="specialli2"><a href="#">我说两句</a></li>
     <li id="specialli1"><a href="#">微门户</a></li>
     <li id="specialli1"><a href="#">大视野</a></li>
      <li><a href="#">视频</a></li>
     <li><a href="#">游戏</a></li>
     <li id="specialli1"><a href="#">新天龙</a></li>
     <li id="specialli2"><a href="#">狩龙战机</a></li>
     <li id="specialli2"><a href="#">手机搜狐</a></li>
     <li id="specialli2"><a href="#">手机游戏</a></li>
     <li id="specialli1"><a href="#">e购房</a></li>
     
     <li><a href="#">搜狗</a></li>
     <li id="specialli1"><a href="#">输入法</a></li>
     <li id="specialli1"><a href="#">浏览器</a></li>
     <li><a href="#">地图</a></li>
     <li><a href="#">邮件</a></li>
     <li><a href="#">搏客</a></li>
     <li><a href="#">社区</a></li>
     <li id="specialli2"><a href="#">我说两句</a></li>
     <li id="specialli1"><a href="#">微门户</a></li>
     <li id="specialli1"><a href="#">大视野</a></li>
      <li><a href="#">视频</a></li>
     <li><a href="#">游戏</a></li>
     <li id="specialli1"><a href="#">新天龙</a></li>
     <li id="specialli2"><a href="#">狩龙战机</a></li>
     <li id="specialli2"><a href="#">手机搜狐</a></li>
     <li id="specialli2"><a href="#">手机游戏</a></li>
     <li id="specialli1"><a href="#">e购房</a></li>
     </ul></div>
     
     
     <div class="ad">
     <div class="stuad">招生广告</div>
     
     <div class="ad2">
     <div class="ad2-1">
     <ul class="faceul2">
      <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>
      <li><a href="#">滑雪大冒险西游伴</a></li>
      <li><a href="#">地下城勇士神枪手</a></li>
      <li><a href="#">搜狐手游权威媒体</a></li>
     </ul></div>
     <div class="ad2-2"><img src="image/shipin.png"/></div>
      <div class="ad2-1">
     <ul class="faceul3">
      <li><a href="#">搜狐应用中心精彩下载!</a></li>
      <li><a href="#">两面正中药牙膏免费领取</a></li>
      <li><a href="#">快乐捕鱼之深海遗迹下载</a></li>
      <li><a href="#">赛车竞速之:3D矿业摩托</a></li>
      <li><a href="#">经典棋牌:快乐斗地主!  </a></li>
      <li><a href="#">最新动作库跑:时空恋人  </a></li>
     </ul></div>
      </div>
     
     <div class="housead">房地产广告</div>
     <div class="picad"><img src="image/tupian.png"/></div>
     
     </div>
  </body>


sohu.css
body{
width:950px;/*高度先不写*/
height:800px;
margin:0 auto;//让body紧贴窗口,消除遍距
/*background-color:pink;*/
border:1px solid red;/*建议不用它定位*/
font-size:12px;

}
.top{
width:950px;
height:28px;
background-color:silver;

}
/*登入*/
.login{
width:480px;
height:28px;
/*background-color:green;*/
float:left;
}
.login img{
width:70px;
height:28px;
float:left;
}
.text1{
height:16px;
width:100px;
margin-left:5px;
margin-top:3px;
float:left;
}
/*设为首页*/
.indexpage{
width:105px;
height:20px;
/*background-color:gray;*/
float:left;
margin-top:6px;
margin-left:70px;
}
/*超链接*/
.myhref{
width:150px;
height:20px;
/*background-color:red;*/
margin-top:6px;
float:right;

}


/*logo*/
.logo{
width:137px;
height:68px;
/*background-color:red;*/
float:left;
margin-top:5px;

}
.logo img{
width:137px;
height:68px;
}
/*导航*/
.navi{
width:807px;
height:68px;
/*background-color:yellow;*/
float:left;
margin-top:5px;
margin-left:5px;
}
.faceul{
width:807px;
height:68px;
list-style-type:none;
padding:0px;
margin-top:0px;
float:left;
}
.faceul li{//li元素默认占一行,所以要订大小
width:28px;
height:15px;
float:left;
margin-left:10px;
margin-top:6px;
text-align:center;//局中
}
#specialli1{
width:40px;
height:15px;
float:left;
margin-left:8px;
margin-top:6px;
text-align:center;
}
#specialli2{
width:52px;
height:15px;
float:left;
margin-left:8px;
margin-top:6px;
text-align:center;
}
/*广告*/
.ad{
width:950px;
height:212px;
/*background-color:blue;*/
margin-top:5px;
float:left;
border:1px solid silver;
}
/*学生广告*/
.stuad{
width:126px;
height:196px;
background-color:blue;
margin:5px 0 0 5px;
float:left;
}
.ad2{
width:453px;
height:196px;
/*background-color:red;*/
margin:5px 0 0 14px;
float:left;
}
.ad2-1{
width:453px;
height:40px;
/*background-color:blue;*/
float:left;

}
.faceul2{
width:453px;
height:40px;
list-style-type:none;
padding:0px;
margin-top:2px;
float:left;

}
.faceul2 li{
width:100px;
height:15px;
float:left;
margin-left:8px;
margin-top:4px;
text-align:center;
}
.ad2-2{
width:453px;
height:100px;
/*background-color:blue;*/
float:left;
margin-top:12px;
}
.ad2-2 img{
width:453px;
height:100px;
}
.faceul3{
width:453px;
height:40px;
list-style-type:none;
padding:0px;
margin-top:5px;
float:left;

}
.faceul3 li{
width:140px;
height:15px;
float:left;
margin-left:8px;
margin-top:4px;
text-align:center;
}
/*房地产广告*/
.housead{
width:150px;
height:196px;
background-color:pink;
margin:5px 0 0 14px;
float:left;
}
/*图片*/
.picad{
width:180px;
height:212px;
/*background-color:gray;*/
margin:0px 0 0 0px;
float:right;
border:1px solid silver;
}
.picad img{
width:170px;
height:192px;
    margin:10px 5px 10px 5px;
}























































































  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值