国庆写的一个小网页

结构

</div>
			<div class="all">
			<!--放图片-->
			<div class="fistimg">
				<img src="img/图片/新闻/xinwen01.jpg" />
			</div>
			<!--整个内容-->
			<div class="zgnr clearfix">
				<!--左边部分-->
				<div class="nrleft">
					<div class="nrleftdv1">
						<ul>
							<li class="nrleftdv1hd">新闻中心</li>
							<li class="nrleftdv1hd_a"><a href="#">公司新闻</a></li>
							<li class="nrleftdv1hd_a"><a href="#">行业新闻</a></li>
							<li class="nrleftdv1hd_b"><a href="#">常见问题</a></li>
						</ul>
					</div>
					<div class="nrleftdv2">
						<ul>
							<li class="nrleftdv1hd">产品中心</li>
							<li class="nrleftdv1hd_a"><a href="#">PBC</a></li>
							<li class="nrleftdv1hd_a"><a href="#">HDI</a></li>
							<li class="nrleftdv1hd_a"><a href="#">FPC</a></li>
							<li class="nrleftdv1hd_a"><a href="#">DFM</a></li>
						</ul>
					</div>
					<div class="nrleftdv3">
						<span class="nrleftdv1hd">联系我们</span>
						<img src="img/图片/top_top_02.jpg" />
						<p>电话：0755-27820302</p>
						<p>传真：0755-29955342</p>
						<font color="gray">raymond@chinaquiclpcb.com</font>
					</div>
				</div>
				<!--右边内容-->
				<div class="nrright">
					<div class="fistnr">
						你现在的位置：新闻中心>>常见问题
					</div>
					<div class="denr">
						<p>线路板生产厂急需向高难度化发展才能跟上时代的潮流_深圳PCB厂_深圳线路板...</p>
						<p>近年来由于民用电子产品——便携产品，液晶电视.数字相机等高功能，在此背景推动下，使得高密度线路板...</p>
					</div>
					<div class="denr">
						<p>线路板生产厂急需向高难度化发展才能跟上时代的潮流_深圳PCB厂_深圳线路板...</p>
						<p>近年来由于民用电子产品——便携产品，液晶电视.数字相机等高功能，在此背景推动下，使得高密度线路板...</p>
					</div>
					<div class="denr">
						<p>线路板生产厂急需向高难度化发展才能跟上时代的潮流_深圳PCB厂_深圳线路板...</p>
						<p>近年来由于民用电子产品——便携产品，液晶电视.数字相机等高功能，在此背景推动下，使得高密度线路板...</p>
					</div>



				</div>
			</div>
		</div>
		 <div class="footer">
        <div class="top">
            <ul>
                <li>
                    <span class="about">实用链接</span>
                </li>
                <li>
                    <span class="about">IPCTM-650测试方法</span>
                </li>
                <li>
                    <span class="about">IPC APEX EXPO</span>
                </li>
                <li>
                    <span class="about">IPC</span>
                </li>
                <li>
                    <span class="about">PCB工厂 UL号查询</span>
                </li>
            </ul>
            <!-- 实用链接 IPCTM-650测试方法IPC APEX EXPO IPC PCB工厂 UL号查询 -->
        </div>

css样式

* {
				margin: 0;
				padding: 0;
			}
			
			.clearfix {
				zoom: 1;
			}
			
			.clearfix:after {
				content: '';
				display: block;
				clear: both;
			}
			
			.all {
				width: 1200px;
				margin: 66px auto;
			}
			
			.fistimg img {
				width: 1200px;
			}
			
			.zgnr {
				margin-top: 20px;
			}
			
			.zgnr .nrleft {
				float: left;
				width: 200px;
				margin-left: 142px;
				text-align: center;
			}
			
			.nrleft .nrleftdv1 {
				/*左浮动*/
				/*float:left;*/
				width: 200px;
				height: 200px;
			}
			
			.nrleft ul {
				list-style: none;
			}
			
			.nrleft .nrleftdv1hd {
				text-align: center;
				display: inline-block;
				width: 200px;
				background: limegreen;
				font-weight: bold;
				color: white;
				font-size: 18px;
				height: 50px;
				line-height: 50px;
				border-radius: 4px 4px 0 0;
			}
			
			.nrleft li {
				display: inline-block;
				width: 200px;
				background: rgba(0, 0, 0, 0.1);
				height: 50px;
				font-weight: bold;
				line-height: 50px;
				border-top: solid 1px gray;
			}
			
			.nrleft .nrleftdv2 {
				width: 150px;
				margin-top: 20px;
				height: 250px;
			}
			
			.nrleft .nrleftdv3 {
				width: 200px;
				height: 320px;
				font-size: 12px;
				margin-top: 20px;
				text-align: left;
				background: white;
			}
			
			.nrleft .nrleftdv3 img {
				margin: 20px;
				width: 160px;
			}
			
			.nrleft .nrleftdv3 p {
				ine-height: 30px;
				margin-left: 10px;
			}
			.nrleft .nrleftdv3 font{
				margin-left: 10px;
				margin-top: 10px;
			}
			
			.zgnr .nrright {
				float: right;
				font-size: 12px;
				width: 800px;
				
			}
			.zgnr .nrright .denr{
				float: right;
				font-size: 12px;
				width: 800px;
				height: 50;
				background: rgba(0, 0, 0, 0.1);
				margin-top: 20px;
				
			}
			.nrleftdv1hd_a a{
				color: black;
			}
			.nrleftdv1hd_a a:hover{
				color:limegreen;
			}
			.nrleftdv1hd_b a{
				color: limegreen;
			}

效果

标签：网页,nrleft,一个,线路板,height,width,国庆,font,margin
来源： https://blog.csdn.net/m0_59181541/article/details/120642394