前言
實驗準(zhǔn)備
- 熟悉并掌握html語法钝满；
- 熟悉層疊樣式表css語法注整；
- 登錄w3school丙猬，進行示例練習(xí)氧枣；
http://www.w3school.com.cn/css/index.asp
實驗內(nèi)容
- 設(shè)計一個個人主頁熊杨，有個人介紹狡耻、照片展示等；
掌握Html語言猴凹，利用Html語言進行界面設(shè)計夷狰。要求有布局、色彩郊霎、字體等因素的考慮沼头；
掌握CSS語法，利用css進行樣式的重新設(shè)計和代碼重構(gòu)书劝。
要求把css單獨放到一個文件进倍，并進行引用對網(wǎng)頁進行渲染。
實驗環(huán)境
- JetBrains WebStorm 2018.3.5 x64
WebStrom界面講解
WebStorm界面
WebStorm界面.png
Webstorm基本操作
新建project.png
準(zhǔn)備操作.png
制作網(wǎng)頁的基本操作
注意：
在html文件中注釋標(biāo)準(zhǔn)格式為“< !-- -- >”
為了簡潔明了购对，注釋以 // 顯示
設(shè)置背景猾昆、文字（以封面的例）
封面.png
我們首先做一個這樣的封面
這個封面的內(nèi)容呢，就是文字+圖片骡苞。
現(xiàn)在.html文件<body></body>進行如下操作：
<div class=“header”> //class=“l(fā)eader”連接了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>
-
在網(wǎng)頁中顯示就是如下圖：
網(wǎng)頁顯示1.png
接下來我么就可以用.css進行樣式渲染了
- 添加背景圖片垂蜗，設(shè)置大小合適的背景圖片
.header{
background-image:url("images/header1.jpg"); //插入背景圖片
background-repeat: no-repeat; //背景圖片不重復(fù)
width: 100%; //設(shè)置背景寬度
height: 400px; //設(shè)置背景高度
}
- 設(shè)置文字大小、顏色
.helloworld{
text-align:center //文字居中
}
.helloworld span h1{
padding-top: 200px; //距離頁面頂部200px;這個需要自己調(diào)整一下距離
color: white; //設(shè)置文字顏色
}
.worldbelow{
font-size:12px; //設(shè)置文字大小
text-align:center
}
.worldbelow span h1{
color: white;
}
- 如此便可做成封面效果
添加線條解幽，制作鏈接（以導(dǎo)航欄為例）
導(dǎo)航欄.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">動態(tài)</a>
</span>
</div>
- 添加樣式
.nav{
margin-top: 7px; //距離上一個div 7px躲株；
text-align:center //文字居中
}
a{
text-decoration: none; //祛除連接下劃線
margin: 0px;
padding: 5px;
font-size:25px; //設(shè)置字體大小
color: #66CDAA;
}
a:hover{
color: #66CDBB; //鼠標(biāo)置于鏈接上時 字體顏色為#66CDBB
}
a:active{
color: greenyellow; //鼠標(biāo)按住鏈接且不放開時 字體顏色為淺綠色
}
- 添加線條
<hr align="center" width="50%" />
<hr align="center" width="40%" />
<hr align="center" width="30%" />
制作邊框片部，添加圖片（以動態(tài)欄為例）
動態(tài)欄.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設(shè)置樣式
.life{ //設(shè)置外邊框
width: 1200px;
margin: 0 auto;
border: lightblue 2px solid;
}
.something{ //設(shè)置內(nèi)邊框
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{ //設(shè)置圖片
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;
}
- 利用上面的基本操作就可以簡單的制作一個網(wǎng)頁出來了，
想要網(wǎng)頁好看望浩，需要自己添加一些設(shè)計元素和理念哦~
還有就是多加練習(xí)Ｏ剿！曾雕！
還有很多有用的操作可以看w3school奴烙，這是一個很好的網(wǎng)站哦~
