css+html页面的碎碎念

最新推荐文章于 2025-02-28 23:36:27 发布

ElinorY

最新推荐文章于 2025-02-28 23:36:27 发布

阅读量345

点赞数 2

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/weixin_38269675/article/details/88653036

css 专栏收录该内容

5 篇文章

订阅专栏

博客介绍了网页布局和样式设置技巧。包括清理默认样式，导航头划过变黑时遮罩层的z - index使用，输入框透明背景图设置。还对比了float和position布局，以图文间隔块和图片布局为例，说明float布局更简洁，同时提到图片填满容器及清除浮动的方法，最后介绍了短线条的设置。

这是网页头，清理一些默认样式~

*{
			margin: 0;
			padding: 0;
			font-family: '微软雅黑';
	}

划过导航头变黑：

		<div class="nav">
				<a href="#">HOME</a>
				<a href="#">ABOUT</a>
				<a href="#">GALLERY</a>
				<a href="#">FACULTY</a>
				<a href="#">EVENTS</a>
				<a href="#">CONTACT</a>
			</div>

		.nav a{
			display: inline-block;/*设置整块划过变黑的关键~*/
			text-decoration: none;
			color: white;
			height: 100px;
			line-height: 100px;
			margin-left: 30px;
			padding-left: 15px;
			padding-right: 15px;

		}

背景上设置遮罩层使用z-index 注意配合absolute relative使用

<div class="pic_banner">
			  	<img src="img/banner3.jpg">
			  </div>
			  <!--遮罩层-->
			  <div class="toplayer"></div>
			  <div class="form_">
			  	<form>
			  		<input type="text" name="name" placeholder="your Name" class="input_sty"><br>
			  		<input type="text" name="phone" placeholder="your Phone" class="input_sty"><br>
			  		<input type="text" name="email" placeholder="your Email" class="input_sty"><br>
			  		<input type="textare" name="text" placeholder="Write Your Comment Here" class="text_sty"><br>
			  		<input type="button" name="send" value="SEND MESSAGE" class="button_sty">
			  	</form>
			  </div>
		</div>
		<!--表单在最上层，背景在最底层 遮罩层在中间-->
		img{
			width: 100%;
			height: 600px;
		}<!--背景图-->
		.banner .toplayer{
			position: absolute;
			width: 100%;
			height: 600px;
			top: 100px;
			left: 0;
			background-color: #000;
			opacity: 0.5;
		}
		.banner .form_{
			width: 500px;
			height: 300px;
			position: absolute;
			top: 400px;
			margin-top: -150px;
			z-index: 4;
			left: 50%;
			margin-left: -250px;
			text-align: center;

		}
		<!--在上层的z-index要大（数值任意）-->

输入框显示背景图（透明）主要是设置transparent属性

.banner .input_sty{
			margin-top: 20px;
			background-color: transparent;
			width: 380px;
			height: 35px;
           border: #c0c0c0 1px solid;
		}

使用float布局会比position布局有时候代码简洁很多~（在这里以一个充满页面，一行4小块的图文间隔块为例子，总共8个小盒子）下面是html结构：
类似这种布局

<div class="ab_bottom">
					<div class="b_img1 sj">
						<img src="img/b1.jpg">
					</div>
					<div class="b_w">
						<h2>Library</h2>
						<div class="b_w11">
							Lorem Jpsum dummy text of the<br>
							printing and typesetting industry.
						</div>
						<div class="b_w12">
							Lorem Lpsum has been the industry's standard dummy<br>
							text ever since the 1500s,when an unknow printer took<br>
							a gallyey of type and scrambled it to make a type speciment babe.
						</div>
						<button>EXPLORE</button>
					</div>
					<div class="b_img1 sj">
						<img src="img/b2.jpg">
					</div>
					<div class="b_w">
						
						<h2>Library</h2>
						<div class="b_w11">
							Lorem Jpsum dummy text of the<br>
							printing and typesetting industry.
						</div>
						<div class="b_w12">
							Lorem Lpsum has been the industry's standard dummy<br>
							text ever since the 1500s,when an unknow printer took<br>
							a gallyey of type and scrambled it to make a type speciment babe.
						</div>
						<button>EXPLORE</button>
				
					</div>


			
					<div class="b_w">
						
						<h2>Library</h2>
						<div class="b_w11">
							Lorem Jpsum dummy text of the<br>
							printing and typesetting industry.
						</div>
						<div class="b_w12">
							Lorem Lpsum has been the industry's standard dummy<br>
							text ever since the 1500s,when an unknow printer took<br>
							a gallyey of type and scrambled it to make a type speciment babe.
						</div>
						<button>EXPLORE</button>
					
					</div>
					<div class="b_img1 sj">
						<img src="img/b3.jpg">
					</div>
					<div class="b_w">
						
						<h2>Library</h2>
						<div class="b_w11">
							Lorem Jpsum dummy text of the<br>
							printing and typesetting industry.
						</div>
						<div class="b_w12">
							Lorem Lpsum has been the industry's standard dummy<br>
							text ever since the 1500s,when an unknow printer took<br>
							a gallyey of type and scrambled it to make a type speciment babe.
						</div>
						<button>EXPLORE</button>
			
					</div>
					<div class="b_img1 sj">
						<img src="img/b4.jpg">
					</div>
			
				</div>

上面布局没有分上下图片层，而是8个小盒子在后续使用float：left让8个小盒子平均分摊在页面（！！！这样比absolute布局要简洁很多~）
这里还有一个小问题，在给图片的容器盒子设置了宽高的情况下，设置img的属性100%可以使得图片填满div盒子，在缩放页面的时候，图片始终是布满盒子的（这是图片默认情况下小于容器盒子出现的问题）
（总100% 每个DIV小块 25% ）
下面是css样式：

ab_bottom{
			width: 100%;
			position: relative;
			overflow: hidden;
			top: 90px;
		}
		.ab_bottom>div{/*对于.ab_bottom下面所有的div子元素，但不包括子孙元素div*/
			width: 25%;
			height: 400px;
			float: left;
		}
		.ab_bottom img{
			width: 100%;/*不去设置的时候图片会溢出和字体重叠*/
			height: 400px;
			position: relative;
		}
		.ab_bottom .b_w{
			background-color: #07cbc9;

		}
		.ab_bottom .b_w h2{
			margin-top: 30px;
			margin-left: 30px;
			margin-bottom: 30px;
		}
		.ab_bottom .b_w .b_w11{
			margin-left: 30px;
			margin-bottom: 30px;
		}
		.ab_bottom .b_w .b_w12{
			margin-left: 30px;
			margin-bottom: 30px;
			font-weight: lighter;
		}

第二种常见布局：
这里可见，上部分文字居中，下部图片与两边个有一些距离
在这里选择float布局仍然是最省事的全部统一设置float left省去了各自设置absolute relative的代码量~总体设置一个宽度1200 px 使用margin:0 auto使得这个板块居中~ 设置6个idv盒子的宽高（去配合1200px）使得使用float后刚好3个在上 3个在下（300Px左右最为合适）嘿嘿，补充一点float以后的当然要清除浮动，嘻嘻
下面是图片的html布局

<div class="gbot">
						
							<div class="box">
								<div class="p">
								<img src="img/03-01.jpg">
							</div>
							<div class="w">
								SCIENCE LAB
							</div>
							</div>
							<div class="box">
								<div class="p">
								<img src="img/03-02.jpg">
							</div>
							<div class="w">
								INDOOR STADIUM
							</div>
							</div>
							<div class="box">
								<div class="p">
								<img src="img/03-03.jpg">
							</div>
							<div class="w">
								TEANSPORTTATION
							</div>
							</div>
					
							<div class="box">
								<div class="p">
								<img src="img/03-04.jpg">
							</div>
							<div class="w">
								KIDS ROOM
							</div>
							</div>
							<div class="box">
								<div class="p">
								<img src="img/03-05.jpg">
							</div>
							<div class="w">
								MEDITON CLASSES
							</div>
							</div>
								<div class="box">
								<div class="p">
								<img src="img/03-06.jpg">
							</div>
							<div class="w">
								MEDITON CLASSES
							</div>
							</div>
						
						
						</div>

以下是图片的css样式

.gallery .gbot>div{
			width: 350px;
		}
		.gallery .gbot .box{
			height: 280px;
			float: left;
			margin: 20px 10px;
			margin-left: 28px;
		}
		.gallery .gbot .box .p{
			height: 250px;
		}
		.gallery img{
			width: 100%;
			height: 100%;
		}
		.gallery .gbot .box .w{
			width: 340px;
			height: 40px;
			background-color: black;
			color: white;
			padding-left: 10px;
		}

设置一条小的短线条：
html

<div class="g_line"></div>

css

.gallery .g_line{
			border-bottom: 2px solid #07cbc9;
	   		width: 40px;
			margin: 20px auto;		
		}

margin:20px auto;
在这里既设置了上下距离也使得线条水平居中~