[Demo]用简单的html，css做一个漂亮的网页！

最新推荐文章于 2024-06-04 13:04:19 发布

爱笑的tycho

最新推荐文章于 2024-06-04 13:04:19 发布

阅读量3w

点赞数 77

分类专栏： Demo 文章标签： html css 漂亮的页面前端入门新手

本文链接：https://blog.csdn.net/weixin_45380677/article/details/100830467

版权

Demo 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

下面是实现效果：

预览地址：https://jh-leong.github.io/Dmeo/ife_1/index.html
在这里插入图片描述

代码如下：

html

<!DOCTYPE html>
<html lang="zh_cn">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="sheji.css">
</head>
<body>
	<header>
		<div id="title">Hello world</div>
		<div id="passages">
			China is speeding up strategic plan, standards, traffic rules, laws and regulations on accident-incurred liabilities for
            its smart car industry, Economic Information Daily reported Thursday.
		</div>
		<div id="login">
			<div>CREATE YOUR ACCOUNT</div>
			<div>IT IS ABSOLUTELY FREE</div>
			<div>
				<input type="text" placeholder=" denis@getcraftwork.com">
				<input type="text" placeholder=" Create your password">
				<input type="submit" value=" SIGN UP ">
			</div>
		</div>
	</header>

	<section>
		<div id="second">
			<div>BOATLOADS OF AWESOME</div>
			<div>
				Ready-made, customizable, HTML
                <br>landing page sections
			</div>
			<div id="info">
				<div id="phone">
					<img src="img/Iphone Icon.png">
					<h1>Mobile First</h1>
                    <p>
                    This scenario might have seemed more likely in the universe imagined by Aristotle and Ptolemy.
                	</p>
				</div>
				<div id="check">
					<img src="img/Check Icon.png">
					<h1>Accessibility</h1>
                    <p>Today they estimate as many as 500 billion billion sunlike stars, with 100 billion billion Earthlike
                        planets.
                    </p>
				</div>
				<div id="pencil">
					<img src="img/Pencil Icon.png"/>
                    <h1>Fluid Typography</h1>
                    <p>
                    	The more we learn about the universe, the more absurd it would seem if all but one of those bodies were
                        bereft of life.
                    </p>
				</div>
				<div id="setting">
					<img src="img/Settings Icon.png">
					<h1>Customization</h1>
                    <p>
                    	Maybe humanity is still so basic and primitive that advanced civilizations don’t think we’re worth talking
                        to.
                    </p>
				</div>
			</div>
		</div>
	</section>

	<section id="third">
		<div>
			<div id="supportive">
				<h1>Supportive policies for <br> China's smart car</h1>
				<br>
	            <p>
	                Fermi wasn’t the first person to ask a variant of this question about alien intelligence. But he owns it. The query is known
	                around the world as the Fermi paradox. It’s typically summarized like this: If the universe is unfathomably
	                large, the probability of intelligent alien life seems almost certain.
	            </p>
				<br>
				<br>
				<button id="button1">CHECK OUR FEATURES</button>
	            <button id="button2">TRY PRODUCT FOR FREE</button>
			</div>
			<div id="ipad">
				<img src="img/IPad.png">
			</div>
		</div>
	</section>

	<section id="fourth">
        <div id="crew">
            <div>Our Awesome Crew</div>
            <br>
            <div>
            	Our unique online teaching style makes learning easy for everyone.Whether you are trying to land a new job, brush
                up on your skills.
            </div>

            <div id="crewphoto">
            	<div class="img_div">
                	<img class="who" src="img/3.png" />	
                	<div class="mask">
                		<h1>Ethan Dutton</h1>
                		<p>SENIOR VISUAL DESINCER</p>
                		<div>
                			<img src="img/Facebook Icon.png">
                			<img src="img/Facebook Icon.png">
                			<img src="img/Facebook Icon.png">
                		</div>
                	</div>	
            	</div>
                <div class="img_div">
                	<img class="who" src="img/3.png" />	
                	<div class="mask">
                		<h1>Ethan Dutton</h1>
                		<p>SENIOR VISUAL DESINCER</p>
                		<div>
                			<img src="img/Facebook Icon.png">
                			<img src="img/Facebook Icon.png">
                			<img src="img/Facebook Icon.png">
                		</div>
                	</div>	
            	</div><div class="img_div">
                	<img class="who" src="img/3.png" />	
                	<div class="mask">
                		<h1>Ethan Dutton</h1>
                		<p>SENIOR VISUAL DESINCER</p>
                		<div>
                			<img src="img/Facebook Icon.png">
                			<img src="img/Facebook Icon.png">
                			<img src="img/Facebook Icon.png">
                		</div>
                	</div>	
            	</div><div class="img_div">
                	<img class="who" src="img/3.png" />	
                	<div class="mask">
                		<h1>Ethan Dutton</h1>
                		<p>SENIOR VISUAL DESINCER</p>
                		<div>
                			<img src="img/Facebook Icon.png">
                			<img src="img/Facebook Icon.png">
                			<img src="img/Facebook Icon.png">
                		</div>
                	</div>	
            	</div>
            </div>
        </div>
    </section>
	
</body>
</html>

CSS

*{margin: 0;padding: 0;}

body{
	font-family: "Microsoft Yahei",sans-serif;
}

header{
	font-weight: lighter;
	background-image: url(img/Background.png);
	color: white;
	width: 100%;
	height: 990px;
	text-align: center;
	margin: 0 auto;
}

#title{
	display: inline-block;
	margin-top: 200px;
	font-size: 64px;
}

#passages{
	padding: 100px 25% 70px 25%;
	font-size: 20px;
	color: #BFBFBF;
}

#login{
	display: inline-block;
	width: 65%;
	height: 240px;
	border: 1px solid #808080;
}

#login div:first-child{
	padding: 60px 0 15px 0;
	font-size: 22px;
}

#login div:nth-child(2){
	padding-bottom: 30px;
    color: rgb(90, 90, 90);

}

#login div input:first-child{
    width: 25%;
    height: 40px;
    border: 1px solid #808080;
    background:rgba(0,0,0,0);
}

#login div input:first-child::placeholder{
	color: white;
}
 
#login div input:nth-child(2) {
    width: 25%;
    height: 40px;
    border: 1px solid #808080;
    background:rgba(0,0,0,0);
    margin-left: 5px;
}
 
#login div input:nth-child(3) {
    width: 10%;
    height: 40px;
    background-color: #000000;
    color: #ffffff;
    border: none;
    margin-left: 5px;
}

section{
	width: 100%;
	text-align: center;
	margin: 0 auto;
	/*border-bottom: 2px solid rgb(200, 200, 200);*/
}

#second{
	height: 700px;
}

#second>div:nth-child(1){
	display: inline-block;
	margin-top: 120px;
}

#second>div:nth-child(2){
	margin-top: 60px;
	font-size: 48px;
	height: 170px;
	font-weight: lighter;
}

#info{
	width: 80%;
	height: 450px;
	margin: 0px auto;
	margin-top: 50px;
}

#info div{
	width: 50%;
	height: 120px;
	text-align: left;
	padding-bottom: 20px;
}

#phone,#pencil{
	float: left;
}

#check,#setting{
	float: right;
}

#info div img{
	display: block;
	float: left;
	padding: 0 15px 80px 20px;
}

#info div h1{
	padding-bottom: 10px;
}

#third{
	height: 750px;
	/*图片路径不能有空格*/
	background-image: url(img/Background2.png);
	text-align: left;
	color: white;
	font-weight: lighter;
}

#supportive{
	width: 32%;
	height: 430px;
	float: left;
	padding: 150px 0 0 10%;
}

#supportive h1{
	font-size: 40px;
	font-weight: lighter;

}

#supportive p{
	font-size: 18px;
	color: black;
}

#supportive button{
	width: 50%;
	height: 50px;
	text-align: center;
	margin-bottom: 10px;
    /*border: none;*/
    border-radius: 5px;
	border: 1px solid black;
}

#button1{
	background: white;
}

#button2{
	background: rgb(0,0,0,0);
	color: white;
}

#ipad{
	width: 40%;
	height: 100%;
	float: right;
	margin-top: 75px;
}

#ipad img{
	width: 100%;
}

#fourht{
	width: 100%;
	height: 1000px;
}

#crew>div:nth-child(1){
	padding-top: 50px;
	font-size: 40px;
	font-weight: lighter;
}

#crew>div:nth-child(3){
	width: 30%;
	padding-bottom: 30PX;
	margin: 0 auto;
	font-weight: lighter;
}

#crewphoto{
	width: 50%;
	height: 500px;
	margin: 0 auto;
}

.img_div {
	width: 40%;
	position: relative;
	float: left;
	margin: 5%;
}

.who{
	width: 100%;
}

.mask {
	background-image: url(img/Background拷贝.png);
	width: 100%;
	height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    opacity: 0;
}

.mask h1{
    font-weight: lighter;
	padding-top: 10%;
}

.mask p{
	/*font-weight: lighter;*/
	padding-top: 5%;
	color: black;
}

.mask img{
	padding-top: 20%;
}

.mask:hover{
	opacity: 1;
}

总结：

几个页面实现下来，我的收获还是很多的，对页面的布局，浮动和定位有了进一步的认识。
做的过程中踩过一个坑，背景图片设置了url之后一直都没有显示，找了半天原因在哪…后来才发现原来是图片路径里有一个空格…

图片路径不能有空格！

爱笑的tycho

关注

77
点赞
踩
489

收藏

觉得还不错? 一键收藏
24
评论
[Demo]用简单的html，css做一个漂亮的网页！

下面是实现效果：代码如下：html<!DOCTYPE html><html lang="zh_cn"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="sheji.css">...
复制链接

扫一扫