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

下面是实现效果：

预览地址：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 forits 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 Earthlikeplanets.</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 werebereft 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 talkingto.</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 knownaround the world as the Fermi paradox. It’s typically summarized like this: If the universe is unfathomablylarge, 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, brushup 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之后一直都没有显示，找了半天原因在哪…后来才发现原来是图片路径里有一个空格…

图片路径不能有空格！

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

用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~...
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
html魔方转动效果,简单说用CSS做一个魔方旋转的效果
说明魔方大家应该是不会陌生的,这次我们来一起用CSS实现一个魔方旋转的特效,先来看看效果图! 解释我们要做这样的效果,重点在于怎么把6张图片,摆放成魔方的样子,而把它们摆放成魔方的样子,重点在于用 ...
简单说用CSS做一个魔方旋转的效果
说明魔方大家应该是不会陌生的,这次我们来一起用CSS实现一个魔方旋转的特效,先来看看效果图! 解释我们要做这样的效果,重点在于怎么把6张图片,摆放成魔方的样子,而把它们摆放成魔方的样子,重点在于用 ...
用HTML➕CSS做一个漂亮的个人博客页面
用html+css设计个人博客网页,纯静态页面前几周我们让做了一个个人博客页面,怎么说,刚接触前端不久,第一次做页面刚开始选择的都是大红大紫的颜色,导致整合页面很low,后来看了些抽象绘画,决定用上 ...
c语言怎么做课程表,怎么用记事本做一个漂亮的网页课程表(1)？
最终效果图一.制作工具编码工具:记事本2(notepad2) 预览工具 :chrome 浏览器. 调试方法: 打开notepad2 , 另存为class-table.html.编辑完代码后保存,用 ...
使用html与css实现一个漂亮的网页
效果图: 实现的代码: html代码: <!DOCTYPE > <html lang="en"> <head><meta charset= ...
用HTML+CSS做一个漂亮简单的个人网页（第二篇）
时隔三年我把之前给我妹写的毕业论文的网站页面写出来一下哈供各位小伙伴参考参考哈不接受批评反驳哈哈哈哈哈哈哈都是我自己胡乱搭的图片和文字可自行更改,按照自己的审美喜好来哈! 先看页面的图片哈首 ...
用HTML+CSS做一个漂亮简单的个人网页详细解析
预览地址: https://static-32f9498d-9b46-413f-a441-4d6984c2edb5.bspapp.com/ Documenthttps://static-32f9498 ...

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

html

CSS

总结：

图片路径不能有空格！

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

最新文章

热门文章