Baiduのホーム-html + CSSのページレイアウト
7つの基本的なページレイアウトセレクタ有することCSSの必要性:IDセレクタ、タグセレクタ、属性セレクタを
使用選択方法の7種類の説明
タグセレクタ:
タグ名{名スタイル:スタイル値;. 。。}
効果:これは、同じタグ・ページ・スタイルの全て追加する
IDセレクタを:
番号#{スタイル名タグ:スタイル値;. 。。}
処置:タグに追加のスタイルは、指定された
:クラスセレクタ
クラスセレクタスタイル名{名:スタイル値を;. 。。}
効果:スタイルを追加するために、異なるタグ
フルセレクタ
* {スタイル名:スタイル値を;. 。。}
组合选择器
选择器1,选择器2,....{样式名:样式值;。。。}
作用:解决不同的选择器之间的重复样式问题
子标签选择器
选择器1 子标签{样式名:样式值;。。。}
属性选择器
标签名【属性名=属性值】{样式名:样式值;。。。}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度首页</title>
<style type="text/css">
#header{width: 100%;height: 45px;}
#header_nav{position: absolute;right: 92px;top: 26px;}
#header_nav li{float: left;list-style-type: none;margin-left: 24px;}
#header_nav li a{color: #000000;font-size: 13px;font-weight: 700;line-height:24px ;}
#main{width: 100%;height: 503px;text-align: center;}
img{margin-top: 117px;}
input[type=text]{height: 39px;width: 592px;border: solid 1px #4992FF ;
background-image: url(img/QQ截图20190802221013.png);
background-repeat: no-repeat;background-position-x: 565px;background-position-y: 7px;}
input[type=submit]{height: 45px;width: 115px;position: relative;right: 7px;background-color: blue;font-size: 15px;color: #fff}
#footer{width: 100%;height: 265px;text-align: center;}
p{text-align: center;position: relative;bottom: 80px;}
#10{text-align: center;position: relative;bottom: 80px;}
</style>
</head>
<div id="header">
<ul id=header_nav>
<li><a href="">新闻</a></li>
<li><a href="">hao123</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 id="main">
<img src="img/QQ浏览器截图20190801222248.png" /><br />
<input type="text" name="" id="" value="" />
<input type="submit" name="" id="" value="百度一下" />
</div>
<div id="footer">
<img src="img/timg.gif" style="width: 80px;height: 80px;position: relative;bottom: 60px;"/><br />
<p id="9">手机百度</p><br />
<p id="10"><a href="">把百度设为主页</a>
<a href="">关于百度</a>
<a href="">About Baidu</a>
<a href=""><百度推广/a>
</p><br />
<p>
©2019 baidu <a href="">使用百度前必读</a><a href="">意见反馈</a> 京ICP证030173号 <a href="">京公网安备11000002000001号</a>
</p>
</div>
<body>
</body>
</html>