web作業全方位攻略

• 我是小菜雞
• 一、做之前的準備
• • 1.PS的簡易使用
  • 2.推薦標簽
    
• 二、準備好了我們就開始肝html了
• • 1.要有個宏觀概念
• 2.菜單
• 3.版圖
• 4.三方塊
• 5.圖片＋新聞
• 6.報名表
• 7.底部
• 8.可能出現的問題

---

我是小菜雞

需要實現的效果





我實現了的效果





沒辦法，我是菜雞，只能實現到這兒了，希望各位大佬指點

一、做之前的準備

1.PS的簡易使用

• 量字體大小
  
  找到這個，然后框住你要量的字，就知道它寬（W）和高（H）了，然后選一個值作為字體大小即可

• “量”顏色

依次點上面這些
然后就在下面這個框框里知道了

2.推薦標簽

比較推薦使用類標簽，你會感謝我的
像這種，看著就很舒服，類標簽yyds

二、準備好了我們就開始肝html了

1.要有個宏觀概念

我們觀察到這個頁面大體上有六部分組成，分別是
菜單，版圖，三方塊，圖片+新聞，報名表和底部
下面我們一起一步一步來實現他們

2.菜單

• 我們看到有一個logo，有一個導航欄
• 我們需要一個大盒子來設置底下那根線 需要一個小點的盒子來放內容 再來個更小點的盒子來放導航欄
• 導航欄我們用最基本的無序號列表格式消除 即用CSS選中無序列表設置 list-style:none; 這樣就沒有前面的小點點了
• 怎么讓它在一行呢，用 float：left 讓它們飛起來
• 也要讓logo飛起來才行哦

3.版圖

版圖用不著盒子，但是需要注意的是要給它設置寬度
width：100% 哎~這樣它就不至于太大

4.三方塊

• 三方塊有點麻煩，我感覺是，我是這樣實現的
• 用超大盒子包括所有內容
• 用小點的盒子專門設置背景
• 用更小點的盒子來放這三個方塊
• 每個方塊用更小的盒子
• 每個方塊又有兩個盒子構成，一部分放標題，一部分放文字
• 哈哈就問你麻不麻煩

5.圖片＋新聞

• 這部分還好
• 一個大盒子包括所有內容，寬度是1200px
• 小點的盒子放文字
• 讓圖片和放文字的盒子都飛起來
• 細節的話，就處理一下行間距，就能更好看一點

6.報名表

• 挺簡單的
• 老規矩設置大盒子放所有內容
• 小點的盒子設置背景
• 更小點的放內容
• 文字一個盒子，表單一個盒子
• 表單的輸入框是可以用css中的width和height設置的
• 再設置設置行間距，還有< br>標簽真的是yyds

7.底部

CSS中

.footer{
width:100%;
background:#292f34;color:#fff;
padding-top:88px;}
.footer .cont{
overflow:hidden;
padding-bottom:90px;
width:1200px;
margin:auto;
}
.footer h4{
font-weight:normal;
font-size:28px;
margin-bottom:30px;}
.footer .logo{
float:left;
width:370px;
padding-top:66px;}
.footer .logo img{width:310px;}
.footer .lianxi{
width:495px;
float:left;}
.footer .lianxi p{margin-bottom:20px;}
.footer .guanzhu{
width:335px;
float:left;}
.footer .guanzhu .ewm img{
width:104px;
float:left;
margin-left:11px;}
.footer .guanzhu .ewm img:first-child{
margin-left:0;}
.footer .copyright{
border-top:1px solid #3f464b;
padding:20px 0;}
.footer .copyright p{
text-align:center;
margin-bottom:10px;
font-size:14px;
}

網頁文件

< div class=“footer”>
< div class=“cont”>
< div class=“logo”>
< a href=“#”>< img src=“footerlogo.png”>< /a>
< /div>
< div class=“lianxi”>
< h4>聯系我們< /h4>
< p>QQ:136665626< /p>
< p>電話：031188338078 （9:00-18:00）< /p>
< p>郵箱：zczxxy@126. com< /p>
< p>地址：石家莊市裕華區與育才街道交口金領大廈2-1-8層中傳集團< /p>
< /div>
< div class=“guanzhu”>
< h4>關注我們< /h4>
< div class=“ewm”>
< img src=“a1.png” alt=“無圖”>
< img src=“a1.png” alt=“無圖”>
< img src=“a1.png” alt=“無圖”>
< /div>
< /div>
< /div>
< div class=“copyright”>
< p>版權信息：河北中傳教育科技有限公司所有< /p>
< p>京ICP備:15006666號< /p>
< /div>
< /div>

8.可能出現的問題

可能會出現你設置的沒問題，它就是不上一行上去
一個可能是你沒讓他飛起來
一個可能是寬度設置的不合適，
我知道我知道，理論上寬度沒問題
但是你改改寬度，真的就能解決問題


感謝您能看到最后，不想努力了請私信我

總結

以上是生活随笔為你收集整理的web开发·基本网页实现（基于CSS盒子模型+PS辅助使用）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。