企业站css样式布局

最新推荐文章于 2021-08-03 21:42:26 发布
倚楼听风雨的行者
最新推荐文章于 2021-08-03 21:42:26 发布
阅读量404
点赞数
CC 4.0 BY-SA版权
本文链接：https://blog.youkuaiyun.com/qq_42972187/article/details/94871710
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			li {
				list-style: none;
			}
			
			.box {
				width: 100%;
				height: 100%;
			}
			
			ul {
				padding: 0;
			}
			
			a {
				text-decoration: none;
				color: black;
			}
			
			.header {
				width: 962px;
				height: 100px;
				margin: 0 auto;
			}
			
			.logo {
				width: 281px;
				height: 33px;
				margin-top: 30px;
				float: left;
			}
			
			.search-input {
				margin-top: 34px;
				width: 228px;
				height: 26px;
				background: #f1f1f1;
				float: right;
			}
			
			.header-img {}
			
			.search-input-item {
				width: 202px;
				height: 26px;
				background: none;
				outline: none;
				border: none;
				font-size: 16px;
				color: #41464C;
				line-height: 26px;
				text-indent: 14px;
				float: left;
			}
			
			.btn {
				cursor: pointer;
				float: right;
				width: 23px;
				height: 26px;
				border: none;
				outline: none;
				background: url(images/btn.jpg) no-repeat left center
			}
			
			.navmenu {
				width: 962px;
				height: 58px;
				margin: 0 auto;
				background: url(images/nav.jpg);
			}
			
			.navmenu>ul {
				padding: 0;
			}
			
			.navmenu>ul>li {
				width: 119px;
				height: 58px;
				line-height: 58px;
				text-align: center;
				list-style: none;
				border-right: 1px solid #494949;
				float: left;
			}
			
			.navmenu>ul>li>a {
				color: white;
				text-decoration: none;
			}
			
			.navmenu>ul>li:last-child {
				border-right: none;
			}
			
			.banner {
				width: 962px;
				height: 465px;
				margin: 0 auto;
			}
			
			.banner>img {
				width: 100%;
				height: 100%;
			}
			
			.companyinfo {
				width: 962px;
				height: 240px;
				margin: 0 auto;
			}
			
			.news-left {
				width: 480px;
				height: 240px;
				float: left;
			}
			
			.news-left>ul>li {
				height: 24px;
				padding-right: 20px;
			}
			
			.news-left>ul>li>a {
				font-size: 12px;
			}
			
			.news-left>ul>li>span {
				float: right;
				font-size: 12px;
			}
			
			.conpany-title,
			.introduce,
			.rencai {
				font-size: 18px;
				color: grey;
				margin-top: 20px;
			}
			
			.news-center {
				width: 217px;
				height: 240px;
				background: #f1f1f1;
				float: left;
				padding-left: 15px;
				padding-right: 8px;
			}
			/*.news-right {
				float: left;
			}
			*/
			
			.develpmet {
				font-size: 12px;
			}
			
			.establish {
				font-size: 14px;
				/*	padding:10px 0px;*/
				padding-top: 10px;
				padding-bottom: 15px;
			}
			
			.jianli,
			.develpmet {
				font-size: 12px;
			}
			
			.develpmet {
				margin-top: 21px;
				line-height: 24px;
			}
			
			.news-right {
				width: 180px;
				height: 240px;
				float: left;
				background: url(images/horse.png) no-repeat right bottom;
				padding: 0 36px 0 24px;
			}
			
			.news-right>img {
				width: 100%;
				height: 100%;
			}
			
			.more {
				margin-top: 5px;
			}
			
			.market {
				width: 962px;
				height: 262px;
				margin: 0 auto;
			}
			
			.market-title {
				font-size: 18px;
				color: grey;
			}
			
			.product {
				width: 100%;
				height: 200px;
			}
			
			dl {
				width: 210px;
				/*height:262px;*/
				float: left;
				margin-right: 40px;
			}
			
			dd {
				font-size: 12px;
				margin-top: 10px;
				line-height: 20px;
			}
			
			dt>img {
				width: 210px;
			}
			
			.last {
				margin-right: 0px;
			}
			
			.footer {
				width: 962px;
				height: 250px;
				background: #e5e5e5;
				margin: 10px auto;
				padding-top: 20px;
			}
			
			.footer-left {
				width: 452px;
				height: 250px;
				float:left;
			}
			
			.list-left ,.list-center,.list-right{
				margin-top: 10px;
				border-top: 1px solid #c1c1c1;
			}
			.footer-title-left,.footer-title-center,.footer-title-right {
				font-size: 16px;
				color: #808080;
				font-weight: normal;
				text-indent: 24px;			
			}	
			.footer-center {
				width: 152px;
				height: 250px;
				float: left;
				margin-left:50px;
				margin-right:50px;
			}	
			.footer-right {
				width: 258px;
				height: 250px;
				float: left;
			}
			.list-left>ul{
				float:left;
			}
			.list-left>ul>li{
				font-size:12px;
				color:gray;
				line-height: 24px;
			}
			.list-item-left{
				width:152px;
			}
			.list-item-center{
				width:192px;
			}
			.list-item-right{
						font-size:12px;
				color:gray;
				line-height: 24px;
			}
			.list-right,.list-center,.list-left{
				padding-top:20px;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<!--头部-->
			<div class="header">
				<h1 class="logo">
					<img  class="header-img"src="images/logo.jpg"/>
				</h1>
				<div class="search-input">
					<input class="search-input-item" type="text" placeholder="search" />
					<input class="btn" type="text" />
				</div>
			</div>
			<div class="navmenu">
				<ul>
					<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>
					<li>
						<a href="#">集团介绍</a>
					</li>
					<li class="noborder">
						<a href="#">集团介绍</a>
					</li>
				</ul>
			</div>
			<div class="banner">
				<img src="images/banner.jpg" alt="" />
			</div>
			<div class="companyinfo">
				<div class="news-left">
					<h1 class="conpany-title">公司新闻</h1>

					<ul>
						<li>
							<a href="">陈建成董事长出席BAT董事会，结果....</a>
							<span>2018-07-20</span>
						</li>
						<li>
							<a href="">陈建成董事长出席BAT董事会，结果....</a>
							<span>2018-07-20</span>
						</li>
						<li>
							<a href="">陈建成董事长出席BAT董事会，结果....</a>
							<span>2018-07-20</span>
						</li>
						<li>
							<a href="">陈建成董事长出席BAT董事会，结果....</a>
							<span>2018-07-20</span>
						</li>
						<li>
							<a href="">陈建成董事长出席BAT董事会，结果....</a>
							<span>2018-07-20</span>
						</li>
						<li>
							<a href="">陈建成董事长出席BAT董事会，结果....</a>
							<span>2018-07-20</span>
						</li>
					</ul>
				</div>
				<div class="news-center">
					<h1 class="introduce">公司介绍</h1>
					<p class="establish">公司成立于 1983年</p>
					<p class="jianli">公司成立于 1983年</p>
					<p class="develpmet">公司成立于 1983年,陈建成董事长说经过30年的发展，企业越来越大，最后没了</p>

				</div>
				<div class="news-right">
					<h1 class="rencai">人才招聘</h1>
					<p class="develpmet">公司成立于 1983年,陈建成董事长说经过30年的发展，企业越来越大，最后没了</p>
					<p class="more">
						<a href=# ""><img src="images/more.jpg" alt="" /></a>
					</p>
				</div>
			</div>
			<!--市场项目-->
			<div class="market">
				<h2 class="market-title">市场项目</h2>
				<div class="product">
					<dl>
						<dt><img src="images/prod1.jpg"/></dt>
						<dd>陈建成董事长出席ATB董事会，说经过近30年的发展的公司</dd>
					</dl>
					<dl>
						<dt><img src="images/prod1.jpg"/></dt>
						<dd>陈建成董事长出席ATB董事会，说经过近30年的发展的公司</dd>
					</dl>
					<dl>
						<dt><img src="images/prod1.jpg"/></dt>
						<dd>陈建成董事长出席ATB董事会，说经过近30年的发展的公司</dd>
					</dl>
					<dl class="last">
						<dt><img src="images/prod1.jpg"/></dt>
						<dd>陈建成董事长出席ATB董事会，说经过近30年的发展的公司</dd>
					</dl>
				</div>
				<div class="footer">
					<div class="footer-left">
						<h2 class="footer-title-left">产品中心</h2>
						<div class="list-left">
							<ul class="list-item-left">
								<li>汽车电机</li>
								<li>汽车电机</li>
								<li>汽车电机</li>
								<li>汽车电机</li>
								<li>汽车电机</li>
							</ul>
							<ul  class="list-item-center">
								<li>汽车电机</li>
								<li>汽车电机</li>
								<li>汽车电机</li>
								<li>汽车电机</li>
							</ul>
							<ul class="list-item-right">
								<li>汽车电机</li>
								<li>汽车电机</li>
								<li>汽车电机</li>
								<li>汽车电机</li>
							</ul>
						</div>
					</div>
					<div class="footer-center">
						<h2 class="footer-title-center">产品中心</h2>
						<div class="list-center">
							<ul class="list-item-right">
								<li>汽车电机</li>
								<li>汽车电机</li>
								<li>汽车电机</li>
								<li>汽车电机</li>
							</ul>
						</div>
					</div>
					<div class="footer-right">
						<h2 class="footer-title-right">产品中心</h2>
						<div class="list-right">
							<img src="images/map.jpg" alt="" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
<!--总结：可以用line-height：撑开行高
	2、版心区域固定宽高
	3、元素设置float：left后，会转化为block元素；
	4、内联样式的比重最大是1000
-->
</html>