前言
实验准备
- 熟悉并掌握html语法；
- 熟悉层叠样式表css语法；
- 登录w3school，进行示例练习；
http://www.w3school.com.cn/css/index.asp
实验内容
- 设计一个个人主页，有个人介绍、照片展示等；
掌握Html语言，利用Html语言进行界面设计。要求有布局、色彩、字体等因素的考虑；
掌握CSS语法，利用css进行样式的重新设计和代码重构。
要求把css单独放到一个文件，并进行引用对网页进行渲染。
实验环境
- JetBrains WebStorm 2018.3.5 x64
WebStrom界面讲解
WebStorm界面
WebStorm界面.png
Webstorm基本操作
新建project.png
准备操作.png
制作网页的基本操作
注意：
在html文件中注释标准格式为“< !-- -- >”
为了简洁明了，注释以 // 显示
设置背景、文字（以封面的例）
封面.png
我们首先做一个这样的封面
这个封面的内容呢，就是文字+图片。
现在.html文件<body></body>进行如下操作：
<div class=“header”> //class=“leader”连接了css样式
<div class="helloworld">
<span>
<h1>Hello, world ! </h1> //输入文字
</span>
</div>
<div class="worldbelow">
<span>
<h1>All that exits is what‘s ahead.</h1> //输入文字
</span>
</div>
</div>
-
在网页中显示就是如下图：
网页显示1.png
接下来我么就可以用.css进行样式渲染了
- 添加背景图片，设置大小合适的背景图片
.header{
background-image:url("images/header1.jpg"); //插入背景图片
background-repeat: no-repeat; //背景图片不重复
width: 100%; //设置背景宽度
height: 400px; //设置背景高度
}
- 设置文字大小、颜色
.helloworld{
text-align:center //文字居中
}
.helloworld span h1{
padding-top: 200px; //距离页面顶部200px;这个需要自己调整一下距离
color: white; //设置文字颜色
}
.worldbelow{
font-size:12px; //设置文字大小
text-align:center
}
.worldbelow span h1{
color: white;
}
- 如此便可做成封面效果
添加线条，制作链接（以导航栏为例）
导航栏.png
- 编写文字，添加链接
<div class="nav">
<span>
<a class="choose" style="margin-left: 0px;" href="#">首页</a>
<a class="choose" href="#introduce">个人介绍</a> //href添加链接，链接到id="introduce" 的文档
<a class="choose" href="#photo">相册</a>
<a class="choose" href="#life">动态</a>
</span>
</div>
- 添加样式
.nav{
margin-top: 7px; //距离上一个div 7px；
text-align:center //文字居中
}
a{
text-decoration: none; //祛除连接下划线
margin: 0px;
padding: 5px;
font-size:25px; //设置字体大小
color: #66CDAA;
}
a:hover{
color: #66CDBB; //鼠标置于链接上时 字体颜色为#66CDBB
}
a:active{
color: greenyellow; //鼠标按住链接且不放开时 字体颜色为浅绿色
}
- 添加线条
<hr align="center" width="50%" />
<hr align="center" width="40%" />
<hr align="center" width="30%" />
制作边框，添加图片（以动态栏为例）
动态栏.png
- 用.html添加文字、图片、线条
<div class="life">
<div class="something">
<div class="life_head">
<div class="life_head_left">
<img class="life_head_picture" src="images/2%20(1).jpg"/>
</div>
<div class="life_head_left_right">I like my life.</div>
<hr width="80%"/> //添加线条
</div>
<div style="margin-left: 100px;">
<p></p>//空行
<h5 style="color: black;">2019-3-17</h5>
<p></p>
<div style="margin-left: 100px;">
<p>All that exists is what's ahead.</p> //添加图片
<p>值得期待的只有前方。</p> //添加文字
<img class="pict" src="images/2%20(2).jpg"/> //添加图片
</div>
</div>
</div>
</div>
- .css设置样式
.life{ //设置外边框
width: 1200px;
margin: 0 auto;
border: lightblue 2px solid;
}
.something{ //设置内边框
border: skyblue 1px solid;
margin-top: 50px;
margin-left: 50px;
margin-right: 50px;
margin-bottom: 100px;
}
.life_head{
width: 100%;
height: auto;
}
>.life_head_picture{ //设置图片
width: 100px;
height: 100px;
border-radius:100px;//让头像圆角
}
.life_head_left{
margin: 50px;
float: left;
}
.life_head_left_right{
text-align: left;
padding-top: 100px;
font-family:"blackadder itc";
font-size:30px;
color:cadetblue;
}
- 利用上面的基本操作就可以简单的制作一个网页出来了，
想要网页好看，需要自己添加一些设计元素和理念哦~
还有就是多加练习！！！
还有很多有用的操作可以看w3school，这是一个很好的网站哦~
