CSS ------ 类百度网页设计（完结）

最新推荐文章于 2019-10-25 09:48:28 发布

qq_42412646

最新推荐文章于 2019-10-25 09:48:28 发布

阅读量183

点赞数

本文链接：https://blog.csdn.net/qq_42412646/article/details/102690573

版权

算是一个综合的应用吧：

instance：

HTML:

<html>
	<head>
		<title>网页设计</title>
		<meta charset="UTF-8"/>
		<link rel="stylesheet" type="text/css" href="../css/网页设计.css" />
		<!--<style type="text/css">
			*{padding: 0px;margin: 0px;}
		</style>-->
	</head>
	<body>ss
		<div id="header">
			<div id="header_li">
				<ul>
					<li><a href="https://search.bilibili.com/all?keyword=clannad&from_source=banner_search"target="_blank">clannad</a></li>
					<li><a href="https://search.bilibili.com/all?keyword=%E5%A2%83%E7%95%8C%E7%9A%84%E5%BD%BC%E6%96%B9">境界的彼方</a></li>
					<li><a href="https://search.bilibili.com/all?keyword=%E7%94%B5%E6%B3%A2%E5%A5%B3%E4%B8%8E%E9%9D%92%E6%98%A5%E7%94%B7">电波女与青春男</a></li>
					<li><a href="https://search.bilibili.com/all?keyword=%E8%8A%B1%E5%BC%80%E7%89%A9%E8%AF%AD">花开伊吕波</a></li>
					<li><a href="https://search.bilibili.com/all?keyword=%E6%9C%88%E8%89%B2%E7%9C%9F%E7%BE%8E">月色真美</a></li>
				</ul>
			</div>	
		</div>
		<div id="main">
			<img src="../img/0.jpg" alt="" id="main_logo" width="220px" height="120px"/>
			<br />
			<input type="text" name="" id="" value="" />
			<input type="submit" name="" id="" value="夢が始まる" />
		</div>
		<div id="footer">
			<img src="../img/dangao.jpg" alt="" id="footer_photo"/>
		</div>
	</body>
</html>

CSS:

/*使盒子模型全部使界面可以完全紧贴网页*/
*{padding: 0px;margin: 0px;}
/*header设计*/
#header{height: 42px;width: 100%;border: 1px;/*background-color: blue;*/}
/*导航栏设计*/
#header_li{position: absolute;right: 3px;top: 5px}
#header_li ul{}
#header_li li{float: left; list-style-type: none;margin: 3px;}
#header_li li a{color: black;font-size: 14px;font-weight: 700;line-height: 24px;}
/*main设计*/
#main{height: 355px;width: 100%;border: 1px;/*background-color: yellow;*/position: relative;text-align: center;}
#main_logo{margin-top: 100px;}
input[type=text]{width: 600px; height: 38px; background-image: url(../img/to.png) ;border: solid 1px #4992ff; background-repeat: no-repeat;background-position-x: 552px; background-position-y: -4px;}

input[type=submit]{width: 80px; height: 38px;position: relative;right: 6px; background-color: #38f; border: 2px blue;}
/*#main_img{width: 280px;height: 100px;border: 3px green;position:absolute;top: 130px;background-size cover;}*/
/*footer设计*/
#footer{height: 150px;width: 100%;border 1px;/*background-color: aqua;*/text-align: center;}
#footer_photo{width:130px;height: 80px; margin-top: 30px;}
/*伪类设计鼠标进入事件*/
#header_li li a:hover{color: blue;}

设网页一般先进行划分div然后再div中添加东西，div划分的越是详细就越好操作。

设计方便的最有效的方式是选择合适的标签选择器，要注意设置格式是是设置那个部分的。

qq_42412646

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS ------ 类百度网页设计（完结）

算是一个综合的应用吧：instance：HTML:<html> <head> <title>网页设计</title> <meta charset="UTF-8"/> <link rel="stylesheet" type="text/css" href="../css/网页设计.css" /> ...
复制链接

扫一扫