Baiduのホーム-html + CSSのページレイアウト

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>&nbsp;&nbsp;&nbsp;
			<a href="">关于百度</a>&nbsp;&nbsp;&nbsp;
			<a href="">About Baidu</a>&nbsp;&nbsp;&nbsp;
			<a href=""><百度推广/a>&nbsp;&nbsp;&nbsp;
		</p><br />
		<p>
			&copy;2019 baidu   <a href="">使用百度前必读</a><a href="">意见反馈</a> 京ICP证030173号      <a href="">京公网安备11000002000001号</a>
		</p>
		
		
		
	</div>
	<body>
	</body>
</html>
リリース3元の記事 ウォンの賞賛0 ビュー496

おすすめ

転載: blog.csdn.net/qq_43601976/article/details/98516027