359day（css练习）

最新推荐文章于 2024-11-02 10:32:21 发布

原创最新推荐文章于 2024-11-02 10:32:21 发布 · 144 阅读

0 ·

CC 4.0 BY-SA版权

本文通过实战案例，详细展示了使用CSS进行网页布局的方法，包括浮动、定位、响应式等技巧，同时介绍了百度的发展历程及其核心业务。

《2018年9月26日》【连续359天】

标题：css练习；

内容：
忘的差不多了。。。

html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="l3.css">
</head>
<body>	
	<div class="wrapper">
		<img src="https://www.baidu.com/img/bd_logo1.png?where=super" class="img">
		<p class="content1">
			百度”二字,来自于八百年前南宋词人辛弃疾的一句词：众里寻他千百度。这句话描述了词人对理想的执着追求。
		</p>
		<p class="content2">
			百度（纳斯达克：BIDU），全球最大的中文搜索引擎、最大的中文网站。1999年底,身在美国硅谷的李彦宏看到了中国互联网及中文搜索引擎服务的巨大发展潜力，抱着技术改变世界的梦想，他毅然辞掉硅谷的高薪工作，携搜索引擎专利技术，于 2000年1月1日在中关村创建了百度公司。
		</p>
	</div>
</body>
</html>

*{
	margin: 0;
	padding: 0;
}

.wrapper{
	width: 600px;
	border: 2px solid black;
}

.wrapper:hover{
	width: 800px;
}

.wrapper .img{
	width: 200px;
	height: 100px;
	float: left;
}

.content1{
	font-size: 15px;
	line-height: 20px;
	height: 40px;
	overflow: hidden;
	color: #333;
	margin-bottom: 8px;
}

.content2{
	font-size: 12px;
	color: #666;
	line-height: 1.2em;
}

随便模仿了百度首页，做的好烂，没时间改了，就这样了。。

<div class="wrapper">
		<div class="content">
			<div class="head">
				
				<a href="http://www.baidu.com/gaoji/preferences.html">设置</a>
				<a href="https://passport.baidu.com/v2/?login&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2F&sms=5">登录</a>
				<a href="http://xueshu.baidu.com/">学术</a>
				<a href="http://tieba.baidu.com/">贴吧</a>
				<a href="http://v.baidu.com/">视频</a>
				<a href="http://map.baidu.com/">地图</a>
				<a href="https://www.hao123.com/">hao123</a>
				<a href="http://news.baidu.com/">新闻</a>
			</div>
			<div class="img">
				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538586633&di=516e53c12130ea1f30f497aa97f31df3&imgtype=jpg&er=1&src=http%3A%2F%2Fphotocdn.sohu.com%2F20150902%2Fmp30357282_1441168828881_1.gif" >
				<div class="box"></div>
			</div>
		</div>
	</div>

*{
	margin: 0;
	padding: 0;
}
.content{
	margin: 0 auto;
}
.head{
	font-size: 13px;
	height: 20px;
	width: 100%;
	border: 1px solid black;
}
a{
	margin-right: 10px;
	margin-left: 10px;
	float:right;
	color: #333;
	display: block;
}
.box{
	display: inline-block;
	width: 618px;
	height: 36px;
	position: absolute;
	margin-left: -288px;
	background-color: #fff;
	max-width: 560px;
	background-color: #F1F3F4;
    border: none;
    border-radius: 22px;
    box-shadow: none;
    outline: none;
    border: 1px solid rgb(185,185,185);
}
.img{
	position: absolute;
	left: 50%;
	top:20%;
}
img {
	width: 400px;
	height: 200px;
	margin-left: -200px;
}

不贴图了。。太丑。