A simple web layout

1. Head setting


1. Set the whole height of the head.
2. The logo module floats to the left, adds pictures to the logo part, and makes the picture position appropriate by setting the width and height of the picture, the left outer margin and the upper outer margin.
3. The banner module has floating. Add content through the ul li tag, set the right outer margin for ul to flow out blank, and then set the left floating, width and height, list style, etc. for li.

2. Main part

2.1 top of main part


1. Set the width and height to add pictures, and then set two div s as the mask layer and the content above the mask layer according to the document flow,
Use absolute positioning to achieve the effect of overlap.

<div class="main">
		<div class="top">
			<img src="image/1.jpeg">
		</div>
		<!-- mask  -->
		<div class="topLayer"></div>
		<div class="topLayer-top"><--Text and buttons on mask layers-->
			<div class="word">MY BEAUTIFUL FILE</div>
			<button>LOOK MORE &gt;</button>
		</div>
		<div class="middle"></div>
		<div class="bottom"></div>
	</div>

2. Mask layer

/*mask */
.main .topLayer{
	position: absolute;
	top: 100px;
	left: 0px;
	background-color: #000;
	width: 100%;
	height: 600px;
	opacity: 0.5;
}

Set the same width and height as the background image. In the absolute positioning, top:100px (because the head is 100px high). Use the background color: #000; Transparency: 0.5; Set masking layer.

Text and buttons above mask layer:
1. Position the content div on the mask layer absolutely and center the whole relative to the background.

.main .topLayer-top{
	width: 500px;
	height: 300px;
	/*background-color: blue;*/
	position: absolute;
	top: 400px;
	margin-top: -150px;
	z-index: 2;
	right: 50%;
	margin-right:-250px;
}

For relatively high levels, set relative attributes (for example: z-index: 2;)
Vertical center: it is the center relative to the whole page. At this time, header100px+main600px, so set top:400px first; Reuse the outer margin top: - 150px; (. Toplayer top is half the height of the module itself.)
Horizontal center is the same.
2. Text part on mask layer

.main .topLayer-top .word{
	padding-top: 100px;
	color: #fff;
	font-size: 25px;
	font-weight: bolder;
	text-align:center;
	font-family: "Microsoft YaHei ";
}

Set the font color, thickness, size and center, and then use padding top: 100px; Center text vertically
3. Button part above mask layer

.main .topLayer-top button{
	width: 200px;
	height: 60px;
	margin-top: 50px;
	color: #fff;
	background-color: #F5704F;/* The background color of the button*/
	font-weight: bolder;
	text-align:center;
	font-family: "Microsoft YaHei ";
	font-size: 14px;
	border-radius: 8px;/*Border fillet*/
	clear: both;
	margin-left: 150px;
}

The width of the blue part is 500px; Therefore, margin left = 250px-100px = 150px;
Similarly, absolute positioning can also be used.

2.2 middle of main part

This part can be divided into three parts for layout, which are set as m-top, m-middle and m-bottom from top to bottom

2.2.1 setting of m-top

<div class="middle">
	<div class="m-top">
		<div class="commen weibo">
			<img src="image/weibo.png">
			<div class="comm">MICROBLOG</div>
		</div>
		<div class="commen weixin">
			<img src="image/weixin.png">
			<div class="comm">WEICHAT</div>
		</div>
		<div class="commen qq">
			<img src="image/qq.png">
			<div class="comm">QQ</div>
		</div>
	</div>
	<div class="m-middle"></div>
	<div class="m-bottom"></div>

Divide the modules in m-top into three modules and use floating to make the three modules in a row and display them in the center

.middle .m-top .commen{
	float: left;
	width: 33.3%;
	text-align: center;
	padding-top: 50px;
}

Picture size setting in each small module

.middle .m-top .commen img{
	width: 100px;
	height: 100px;
}

Text settings in each small module

.middle .m-top .commen .comm{
	font-size: 20px;
	font-style: italic;
	font-weight: bold;
	color: #7D7C7F;
	padding-top: 20px;
}

2.2.2 setting of m-middle
This part only has text, so you only need to set the text font size, color, text center, bold italic, padding

 <div class="middle">
	<div class="m-top"></div>
	<div class="clear"></div>
    <div class="m-middle">
"I want to give good things to record down,<br>after the recall will be very beautiful."
	</div>
	<div class="m-bottom"></div>
</div>	

Since m-top is set to float, it is necessary to clear the float to prevent height collapse and make the padding set by m-middle take effect

.clear{
	clear:both;
}
.middle .m-middle{
	font-size: 20px;
	font-style: italic;
	font-weight: bold;
	color: #E97196;
	text-align: center;
	padding-top: 50px;
	padding-bottom: 50px;
}

2.2.3 setting of m-bottom
This part can be divided into three modules, each module contains a picture and two lines of text in different styles

<div class="midddle">
<div class="m-bottom">
	<div class="m-com">
		<img src="image/03-01.jpg">
		<div class="des1">Cool Image</div>
		<div class="des2">Record The Picture</div>
	</div
	<div class="m-com">
		<img src="image/03-02.jpg">
		div class="des1">Cool Image</div>
		<div class="des2">Record The Picture</div>
	</div>
	<div class="m-com">
		<img src="image/03-03.jpg">
		<div class="des1">Cool Image</div>
		<div class="des2">Record The Picture</div>
	</div>
</div>
</div>

The three modules first float left into a row, and set the appropriate size and inner margin for the picture to center the picture, and then set the style for the text

.middle .m-bottom .m-com{
	float:left;
	padding: 10px;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}
.middle .m-bottom .m-com  img{
	width: 310px;
	height: 260px;
}
.middle .m-bottom .m-com .des1{
	/*font-size: 18px;
	font-weight: bold;
	text-align: center;*/
	color: #7D7D7D;
	padding-top: 20px;
	
}
.middle .m-bottom .m-com .des2{
	/*font-size: 18px;
	font-weight: bold;
	text-align: center;*/
	color: #BDBDBC;
	padding-top: 10px;
	
}

The two lines of text have the same settings and can be written into the parent element.

2.3 bottom of main part

First, because the middle part is set to float, you should clear the float first. Because the content at the bottom has a background color, a div should be added to present the content. The content includes a title and two graphic typesetting. A graphic typesetting is represented by a DL, DT and DD. if floating is also set, floating should be cleared.

<div class="bottom">
  <div class="content">
    <div class="title">FROM THE PHOTO ALBUM</div>
 	<div class="pic-content">
 		<dl>
 		  <dt><img src="image/04-01.jpg"></dt>
 		  <dd>Life is like a book, just read more and more <br>refined, more write more carefully. When <br>read, mind open, all things have been <br>indifferent to heart. Life is the precipitation.</dd>
 		</dl>
 		<dl>
 		 <dt><img src="image/04-02.jpg"></dt>
 		 <dd>Life is like a cup of tea, let people lead <br>a person to endless aftertastes. <br>You again good taste, it will always have a <br>different taste, different people will have different taste more.</dd>
 	  </dl>
    </div>
    <div class="clear"></div>
  </div>
</div>

First set the background color

.bottom{
  background-color: red;
}

Set the width of the content and center it horizontally

.bottom .content{
  width: 1000px;
  margin: 0 auto;
 }

Set the title in the content

.bottom .content .title{
			font-size: 20px;
			text-align: center;
			font-weight: bold;
			color: #7D7D7D;
			font-style: italic;
			padding-top: 50px;
			padding-bottom: 50px;
		}	

Set the picture and text mixed arrangement module (floating left into a row with margin) and picture size. Set float to clear float

.bottom .content .pic-content dl{
			float: left;
			width: 460px;
			margin: 10px 20px;
		}
		.bottom .content .pic-content img{
			width: 460px;
			height: 460px;
		}

Set text

.bottom .content .pic-content dl dd{
			padding-top: 20px;
	        font-size: 20px;
			font-weight: bold;
			color: #7D7C7F;
			padding-bottom: 50px;
		}

3. Bottom part

<div class="footer">
		© 2016 imooc.com Beijing ICP Bei 13046642
	</div>
.footer{
	width: 100%;
	height: 100px;
	line-height: 100px;
	background-color: #292C35;
	font-size: 15px;
	color:white;
	font-family: "Microsoft YaHei ";
	text-align: center;
}

Tags: css

Posted by Altairzq on Mon, 09 May 2022 23:01:30 +0300