CSS定位、浮动、选择器
index01
html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>定位title>
<link href="style.css" type="text/css" rel="stylesheet">
<style>
[title]{
color: forestgreen;
}
a[href="http://www.baidu.com"]{
color: crimson;
font-size: 30px;
}
[style1 ~=sty]{ /* 在确定通过部分属性值来确定时，此处要加一个~，否则无法被加载*/
color: chartreuse;
font-size: 25px;
}
style>
head>
<body>
<div id="position1">div>
<div id="position2">div>
<div id="position3">div>
<script>
for(var i =0;i<30;i++){
document.write(i+"
");
}
script>
<h3>CSS浮动h3>
<div id="container">
<div id="fd">div>
<div id="sd">div>
<div id="td">div>
<div id="text">Hello HTML!Hello World!div>
div>
<br/>
<h3>CSS浮动应用h3>
<div id="div1">
<ul>
<li ><img src="image/1.jpg" width="400px" height="400px">li>
<li ><img src="image/2.jpg" width="400px" height="400px">li>
<li ><img src="image/3.jpg" width="400px" height="400px">li>
ul>
<ul>
<li ><img src="image/4.jpg" width="400px" height="400px">li>
<li ><img src="image/5.jpg" width="400px" height="400px">li>
<li ><img src="image/6.jpg" width="400px" height="400px">li>
ul>
<ul>
<li><img src="image/7.jpg" width="400px" height="400px">li>
<li><img src="image/8.jpg" width="400px" height="400px" >li>
<li><img src="image/9.jpg" width="400px" height="400px"> li>
ul>
div>
<br/>
<br/>
<h3>选择器h3>
<div>
<div id="did">id只可以使用一次，id选择器不能结合使用，当使用js的时候，需要用到iddiv>
<div class="did">class可以多次使用div>
<div class="did">class可以多次使用div>
<div class="did">class可以多次使用div>
div>
<p title="tt">最简单的属性选择器p>
<a href="http://www.baidu.com">根据具体的属性值来选择效果a>
<a href="http://www.bafgfdgsdgfd.com">不匹配的属性值效果不会被加载a>
<p style1="sty">属性与属性值必须匹配，否则无法显示p>
<p style1="ssty">属性与属性值必须匹配，否则无法显示p>
<p style1="sty hello">根据部分属性值来确定,包含属性值的可以被加载p>
<p style1="st hello">不包含属性值的不能被加载p>
<p>后代选择器<strong>可以指定谁被加载strong>的效果p>
<h4>子元素选择器用法为<strong>元素1 > 元素2strong>h4>
<a href="http://m.blog.csdn.net/u012110719/article/details/41171517">子元素选择器与后代元素选择器区别，详情见网页a>
<br/>
<ul>相邻兄弟选择器：必须要有相同的父级元素<li>泰国li>
<li>新加坡li>
<li>印度尼西亚li>
ul>
body>
html>
style.css
#position1{ height: 100px; width: 100px; background-color: lightblue; position: absolute; top: 40px; left: 30px; z-index: 3; } #position2{ height: 100px; width: 100px; background-color: blueviolet; position: absolute; top: 50px; left: 40px; z-index: 1; } #position3{ height: 100px; width: 100px; background-color: palegreen; position: absolute; top: 60px; left: 50px; z-index: 2; } /*CSS浮动*/ #fd{ width: 100px; height: 150px; background-color: chartreuse; float: left; } #sd{ width: 150px; height: 100px; background-color: aqua; float: left; } #td{ width: 100px; height: 100px; background-color: blueviolet; float: left; } #container{ width: 300px; height: 400px; background-color: darkgray; } #text{ clear: left; /* 文字清除浮动效果*/ } /*CSS定位-浮动的应用*/ *{ margin: 0px; padding: 0px; } li{ list-style: none; } #div1{ width: 1500px; height: auto; margin: 20px auto; } ul{ width: 500px; float: left; } /*选择器*/ #did{ color: blue; font-size: 20px; } .did{ color: crimson; font-size: 20px; } /*后代选择器*/ p strong{ color: lightgreen; font-size: 30px; } /* 子元素选择器*/ h4 > strong{ color: springgreen; font-size: 30px; } /*相邻兄弟选择器*/ li+li{ color: aquamarine; font-size: 25px; }部分截图
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！