无法在这个位置找到: head2.htm
当前位置: 建站首页 > 凡科概况 > 凡科文化 >

学生个人网页制作代码

时间:2020-12-28 23:01来源:学生个人网页制作代码 作者:jianzhan 点击:
学生个人网页制作代码:[Demo]用简单的html,css做一个漂亮的网页! 下面是实现效果 预览地址 https://jh-leong.github.io/Dmeo/ife_1/index.html 代码如下 html !DOCTYPE html html lang zh_cn head meta cha

学生个人网页制作代码:[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 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 
 This scenario might have seemed more likely in the universe imagined by Aristotle and Ptolemy.
 /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.
 /div 
 div id pencil 
 img src img/Pencil Icon.png / 
 h1 Fluid Typography /h1 
 The more we learn about the universe, the more absurd it would seem if all but one of those bodies were
 bereft of life.
 /div 
 div id setting 
 img src img/Settings Icon.png 
 h1 Customization /h1 
 Maybe humanity is still so basic and primitive that advanced civilizations don’t think we’re worth talking
 /div 
 /div 
 /div 
 /section 
 section id third 
 div 
 div id supportive 
 h1 Supportive policies for br China s smart car /h1 
 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.
 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 
 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之后一直都没有显示 找了半天原因在哪…后来才发现原来是图片路径里有一个空格…

图片路径不能有空格 (责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm
栏目列表
推荐内容


扫描二维码分享到微信