CSS练习-网页

最新推荐文章于 2024-07-16 13:45:20 发布

K7（）

最新推荐文章于 2024-07-16 13:45:20 发布

阅读量464

点赞数

分类专栏：练习文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_44125413/article/details/122955028

版权

本文通过实例探讨了如何使用CSS和HTML进行网页布局设计，涵盖了CSS选择器、盒模型、浮动布局、Flexbox和Grid等核心概念，旨在提升网页的视觉效果和用户体验。

摘要由CSDN通过智能技术生成

*{
	margin: 0px;
	padding: 0px;
	outline: none;
}
body{
	background-color: #F4F4F4;
}
/* 顶部logo */
.top_box{
	width: 1200px;
	background-color: white;
	margin: auto;
}
.top_box_left,.top_box_center,.top_box_riht{
	float: left;
	height: 90px;
}
.top_box_left{
	width: 200px;
	
}
.top_box_center{
	width: 800px;
	
	
	
}
.top_box_riht{
	width: 200px;
	text-align: center;
	line-height: 90px;/*把整个div当做一行，行高为90.行内内容默认垂直居中，块级标签不能这么用*/
	
}
.login_btn{
	background-color: #FF4C4C;
	color: white;
	font-size: 20px;
	border: 0px;
	padding: 10px;
	font-weight: 700;
	border-radius: 5px;
}
.center_box{
	width: 1200px;
	height: 1127.6px;
	background-color: white;
	margin: auto;
	margin-top: 10px;
	color: black;
	text-align: left;
}
.center_box_left,.center_box_center,.center_box_right{
	float: left;
	height: 1162.72px;
}
.center_box_left{
	width: 190px;
	height: 836px;
	
	float: left;
}
.center_box_center{
	width: 700px;
	height: 502px;
	
}
.center_box_right{
	width: 300px;
	height: 995.72px;
	
}
.text_box_top,.text_box{
	height: 24px;
	border-radius: 5px;
	padding: 10px 10px 10px 60px;
}
.text_box_top{
	background-color: #FF4C4C;
	color: #FFFFFF;
}
.text_box:hover{
	background-color: #FF4C4C;
	color: #FFFFFF;
}
.center_box_center_top{
	width: 700px;
	height: 48px;
	border-bottom: 1px solid #F4F4F4;
	padding: 0 20px;
}
.text_box2{
	width: 72px;
	height: 29px;
	padding: 10px 0px 9px ;
	font-size: 16px;
	border-bottom: 2px red solid;
	margin-bottom: -1px;
	display: inline-block;
}
.center_box_center_center{
	width: 700px;
	height: 227px;
	padding: 20px;
	border-bottom: 1px solid #F4F4F4;
	
}
.text_box3{
	font-size: 1.3em;
	line-height: 30px;
	margin-bottom: 13px;
	
}
.text_box3:hover{
	color: #FF0000;
	text-decoration: underline;
}
.left,.right{
	float: left;
}
.left{
	width: 390px;
	height: 91.5px;
	}
.right{
	width: 218px;
	height: 144px;
}
.left_top{
	 width: 390px;
	 color: darkgrey;
	 font-size: 12px;
	 margin-right: 10px;
	 margin-bottom: 8px;
}
.left_center{
	line-height: 26px;
	font-size: 16px;
	margin-bottom: 12px;
}
.left_bottom{
	line-height: 26px;
}
.left_bottom_left,.left_bottom_right{
	display: inline-block;
	float: left;
}
.left_bottom_left{
	    background-color: #ff4c4c;
	    color: #fff;
	    padding: 5px;
	    line-height: 26px;
	    margin-right: 20px;
		font-size: 12px;
}
.left_bottom_right{
	color: darkgrey;
	line-height: 26px;
	font-size: 12px;
	padding: 5px;
}
.left_bottom_right:hover{
	color: #FF0000;
	text-decoration: underline;
}
.bottom_box{
	width: 1200px;
	height: 167px;
	border-top: 5px solid #F4F4F4;
	margin: auto;
	
}
.bottom_box_under{
	height: 78px;
	background-color: #FFFFFF;
	
}
.bottom_box_top{
	font-weight: bold;
	    font-size: 16px;
	    color: #333;
		padding: 20px 20px 10px 20px;
}
.bottom_box_center {
	width: 1160px;
	height: 24px;
	    color: #333;
	    font-size: 16px;
	    padding-left: 30px;
}
.bottom_box_bottom{
	font-size: 12px;
	text-align: center;
	    background-color: #F4F4F4;
	    padding:20px 200px 10px 200px; 
	   
}
a{
	color: #333;
	text-decoration: none;
}
.center_box_right{
	width: 300px;
	    background-color: #ffffff;
		height: 1101.6px;
}
.t1{
	height: 77.98px;
}
.search{
	height: 38px;
	    padding: 20px;
	    position: relative;
	    margin-right: 20px;
}
.search_input{
	    height: 38px;
	    line-height: 38px;
	    border: 1px solid #e9e9e9;
	    padding-left: 10px;
	    font-size: 14px;
}
.btn{
	width: 64px;
	    height: 38px;
	    padding-left: 0;
	    padding-right: 0;
	    position: absolute;
	    top: 20px;
	    right: 0;
	    border-left: none;
	    color: #fff;
	    font-size: 16px;
	    line-height: 1;
	    outline: none;
	    cursor: pointer;
	    text-align: center;
	    vertical-align: middle;
	    background-color: #ff4c4c;
}
.t2{
	height: 119.23;
}
.t3{
	margin: 20px 0;
	    background-color: #fff;
	    padding: 20px;
	    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 2%);
	    overflow: hidden;
		border-bottom:  1px solid #e9e9e9;
}
.text{
	border-bottom: 2px solid #ff4c4c;
	    display: inline-block;
	    margin-bottom: -1px;
	    padding-bottom: 10px;
}
.text_b{
	border-bottom: 1px solid #e9e9e9;
	    color: #333;
	    
	    margin: -5px 0 20px;
	    font-size: 18px;
}
.zuo{
	float: left;
	    width: 158px;
		height: 50px;
}
.you{
	    float: right;
	    width: 90px;
	    height: auto;
}
.you img{
	width: 90px;
	    height: 60px;
}
.wenzhang{
	    color: #333;
	    line-height: 24px;
	    font-size: 14px;
		width: 73.5;
}
.riqi{
	    color: #999;
	    line-height: 24px;
}
.wai{
	width: 260px;
	height: 64.5px;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link href="news.css"  rel="stylesheet"/>
	</head>
	<body>
		<!-- 顶部logo-->
		<div class="top_box">
			<div class="top_box_left">
				<img src="img/logo.png" />
			</div>
			<div class="top_box_center">
				<img src="img/advert.jpg" />
			</div>
			<div class="top_box_riht">
				<a>
				<input type="button" value="登&nbsp&nbsp录" class="login_btn" />
			    </a>
			</div>
			<div style="clear: left;"></div>
		</div>
		<!-- 顶部结束 -->
		<!-- 中间 -->
		<div class="center_box">
		<!-- 中左 -->
		<div class="center_box_left">
			<div