码迷,mamicode.com
首页 > 其他好文 > 详细

20161115

时间:2016-11-16 03:13:54      阅读:140      评论:0      收藏:0      [点我收藏+]

标签:学习生活 布局 外部样式

 今天主要学习了制作一个网页应该如何布局以及外部样式的使用方法。

笔记:

<link rel="stylesheet" type="text/css" href="地址">    引入外部样式


写样式的三种样式:1.行内样式 style="属性:值;"

            2.内部样式 在head内部定义<style></style>

            3.外部样式 

            引入外部样式:<link rel="stylesheet" type="text/css" href="地址"> 


如果样式后面加上!impotant,则可以达到最高的优先级,打破其他的优先级(有的浏览器不支持)


优先级的总结:!important>行内>内部>外部


position relative相对定位  相对于自己位置的变化

      absolute绝对定位  

实现:(布局)

<!DOCTYPE html>

<html>

<head>

<title></title>

<link rel="stylesheet" type="text/css" href="./css/ce.css">

</head>

<body>

<div id="wai">

<div id="a">

</div>

<div id="b">

</div>

<div id="c">

<div id="d">


<div id="f">

</div>

<div class="e">

</div>

<div class="e">

</div>

<div class="e">

</div>

<div class="e">

</div>

</div>

<div id="e">

<div class="j">

</div>

<div class="j">

</div>

</div>

</div>

<div id="last">

</div>

</div>


</body>

</html>


外部样式:(ce.css)

#wai{

height: 900px;

width: 1000px;

margin:0 auto;

}

#a{

height: 100px;

width: 1000px;

background-color: red;

}

#b{

height: 240px;

width:1000px;

background-color: black;

}

#c{

height: 700px;

width: 1000px;

background-color: pink;

}

#d{

width: 600px;

height: 700px;

background-color: yellow;

float: left;

}

#f{

width: 600px;

height: 30px;

background-color: blue;

}

.e{

width: 280px;

height: 310px;

margin: 10px;

background-color: green;

float: left;

}

#e{

width: 400px;

height: 700px;

background-color: orange;

float: left;

}

.j{

width: 380px;

height: 335px;

margin: 10px;

background-color: red;

}

#last{

height: 100px;

width: 1000px;

background-color: blue;

}


20161115

标签:学习生活 布局 外部样式

原文地址:http://12254249.blog.51cto.com/12244249/1873273

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!