0
0

HTML前端静态网页制作

在制作网页之前，首先先分析网页是那些部分组成，可以从以下的代码看出，分为头部、导航栏、logo部分、文字部分等等这些组成。多的不说，直接上代码，本次静态网页代码分为html和css部分。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="网页.css">
  9. </head>
  10. <body>
  11.     <!-- 头部部分 -->
  12.     <div id="haeder">
  13.         <!-- 导航栏部分 -->
  14.         <div id="nav">
  15.             <!-- logo部分 -->
  16.           <div id="logo">
  17.              <img src="logo.png" alt="">
  18.           </div>
  19.           <!-- 文字部分 -->
  20.           <div id="words">
  21.               <ul>
  22.                  <li><a href="#">首页</a></li>
  23.                  <li><a href="#">课程</a></li>
  24.                  <li><a href="#">职业规划</a></li>
  25.               </ul>
  26.           </div>
  27.           <!-- 输入框部分 -->
  28.           <div id="search">
  29.               <input type="text" value="请输入文字">
  30.               <button></button>
  31.           </div>
  32.           <!-- user部分 -->
  33.           <div id="user">
  34.               <img src="user.png" alt="">qq lilei
  35.           </div>
  36.         </div>
  37.     </div>
  38.     <!-- banner部分 -->
  39.     <div id="banner">
  40.         <!-- 在cont里面插入图片 -->
  41.        <div id="cont">
  42.            <!-- 侧导航栏 -->
  43.            <div id="work">
  44.                <ul>
  45.                    <li><a href="#">前端开发 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></a></li>
  46.                    <li><a href="#">前端开发 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></a></li>
  47.                    <li><a href="#">前端开发 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></a></li>
  48.                    <li><a href="#">前端开发 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></a></li>
  49.                    <li><a href="#">前端开发 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></a></li>
  50.                    <li><a href="#">前端开发 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></a></li>
  51.                    <li><a href="#">前端开发 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></a></li>
  52.                    <li><a href="#">前端开发 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></a></li>
  53.                    <li><a href="#">前端开发 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></a></li>
  54.                </ul>
  55.            </div>
  56.            <!-- 右边表格 -->
  57.            <div id="biaoge">
  58.                <div id="biao1">
  59.                    <p>
  60.                        我的课程
  61.                    </p>
  62.                </div>
  63.                <div id="biao2">
  64.                    <p>继续学习 程序语言设计</p>
  65.                    <p id="op">学习使用对象</p>
  66.                    <hr>
  67.                </div>
  68.                <div id="biao2">
  69.                  <p>继续学习 程序语言设计</p>
  70.                  <p id="op">学习使用对象</p>
  71.                  <hr>
  72.                 </div>
  73.                 <div id="biao2">
  74.                     <p>继续学习 程序语言设计</p>
  75.                     <p id="op">学习使用对象</p>
  76.                     <hr>
  77.                    </div>
  78.                    <div id="biao3">
  79.                        <p>
  80.                            全部课程
  81.                        </p>
  82.                    </div>
  83.             </div>
  84.        </div>
  85.     </div>
  86.     <!-- 横向栏 -->
  87.     <div id="transverse">
  88.         <div id="w">
  89.             <ul>
  90.                 <li><a href="#" id="io">精品推荐</a></li>|
  91.                 <li><a href="#">JQuery</a></li>|
  92.                 <li><a href="#">JQuery</a></li>|
  93.                 <li><a href="#">JQuery</a></li>|
  94.             </ul>
  95.         </div>
  96.         <div id="youbian">
  97.             <a href="#">修改兴趣</a>
  98.         </div>
  99.     </div>
  100.     <!-- 结尾部分 -->
  101.     <div id="ending">
  102.         <div id="word1">
  103.             <a href="#" id="zuo">精品推荐</a>
  104.         </div>
  105.         <div id="word2">
  106.             <a href="#" id="you">查看全部</a>
  107.         </div>
  108.     </div>
  109.     <!-- 图片部分 -->
  110.     <div id="pic">
  111.         <!-- 图片1 -->
  112.         <div id="pic1">
  113.             <img src="pic.png" alt="">
  114.             <p>
  115.                 Think PHP 5.0 博客系统
  116.                 实战项目演练
  117.             </p>
  118.             <a href="#" id="cc">高级</a>
  119.             <p id="dd">1125人在线学习</p>
  120.         </div>
  121.         <!-- 图片2 -->
  122.         <div id="pic2">
  123.             <img src="pic.png" alt="">
  124.             <p>
  125.                 Think PHP 5.0 博客系统
  126.                 实战项目演练
  127.             </p>
  128.             <a href="#" id="cc">高级</a>
  129.             <p id="dd">1125人在线学习</p>
  130.         </div>
  131.         <!-- 图片3 -->
  132.         <div id="pic3">
  133.             <img src="pic.png" alt="">
  134.             <p>
  135.                 Think PHP 5.0 博客系统
  136.                 实战项目演练
  137.             </p>
  138.             <a href="#" id="cc">高级</a>
  139.             <p id="dd">1125人在线学习</p>
  140.         </div>
  141.         <!-- 图片4 -->
  142.         <div id="pic4">
  143.             <img src="pic.png" alt="">
  144.             <p>
  145.                 Think PHP 5.0 博客系统
  146.                 实战项目演练
  147.             </p>
  148.             <a href="#" id="cc">高级</a>
  149.             <p id="dd">1125人在线学习</p>
  150.         </div>
  151.         <!-- 图片5 -->  
  152.         <div id="pic5">
  153.             <img src="pic.png" alt="">
  154.             <p>
  155.                 Think PHP 5.0 博客系统
  156.                 实战项目演练
  157.             </p>
  158.             <a href="#" id="cc">高级</a>
  159.             <p id="dd">1125人在线学习</p>
  160.         </div>
  161.         <!-- 图片6 -->
  162.         <div id="pic6">
  163.             <img src="pic.png" alt="">
  164.             <p>
  165.                 Think PHP 5.0 博客系统
  166.                 实战项目演练
  167.             </p>
  168.             <a href="#" id="cc">高级</a>
  169.             <p id="dd">1125人在线学习</p>
  170.         </div>
  171.         <!-- 图片7 -->
  172.         <div id="pic7">
  173.             <img src="pic.png" alt="">
  174.             <p>
  175.                 Think PHP 5.0 博客系统
  176.                 实战项目演练
  177.             </p>
  178.             <a href="#" id="cc">高级</a>
  179.             <p id="dd">1125人在线学习</p>
  180.         </div>
  181.         <!-- 图片8 -->
  182.         <div id="pic8">
  183.             <img src="pic.png" alt="">
  184.             <p>
  185.                 Think PHP 5.0 博客系统
  186.                 实战项目演练
  187.             </p>
  188.             <a href="#" id="cc">高级</a>
  189.             <p id="dd">1125人在线学习</p>
  190.         </div>
  191.         <!-- 图片9 -->
  192.         <div id="pic9">
  193.             <img src="pic.png" alt="">
  194.             <p>
  195.                 Think PHP 5.0 博客系统
  196.                 实战项目演练
  197.             </p>
  198.             <a href="#" id="cc">高级</a>
  199.             <p id="dd">1125人在线学习</p>
  200.         </div>
  201.         <!-- 图片10 -->
  202.         <div id="pic10">
  203.             <img src="pic.png" alt="">
  204.             <p>
  205.                 Think PHP 5.0 博客系统
  206.                 实战项目演练
  207.             </p>
  208.             <a href="#" id="cc">高级</a>
  209.             <p id="dd">1125人在线学习</p>
  210.         </div>
  211.     </div>
  212.     <!-- 最后结尾部分 -->
  213.     <div id="last">
  214.         <!-- 左边内容部分 -->
  215.         <div id="last1">
  216.             <br>
  217.             <br>
  218.             <img src="logo.png" alt="">
  219.             <br>
  220.             <br>
  221.             <p>
  222.                 学成在线致力于普及中国最好的教育它与中国一流的大学和机构合作提供在线课程
  223.                 @2021 Baidu 使用百度前必读|百科协议|隐私政策|百度百科合作平台|京】CP证030173号
  224.             </p>
  225.             <div id="box">
  226.                 <a href="#">下载APP</a>
  227.             </div>
  228.         </div>
  229.         <!-- 右边内容部分 -->
  230.         <div id="box2">
  231.             <!-- 右边内容部分一 -->
  232.           <div id="last2">
  233.               <div>
  234.                 <a href="#" id="yanse">关于学成网</a>
  235.                  <ul>
  236.                      <li><a href="#">关于</a></li>
  237.                      <li><a href="#">管理团队</a></li>
  238.                      <li><a href="#">工作机会</a></li>
  239.                      <li><a href="#">客服服务</a></li>
  240.                      <li><a href="#">帮助</a></li>
  241.                  </ul>
  242.               </div>
  243.           </div>
  244.           <!-- 右边内容部分二 -->
  245.             <div id="last3">
  246.              <div>
  247.                  <a href="#" id="yanse">关于学成网</a>
  248.                   <ul>
  249.                       <li><a href="#">关于</a></li>
  250.                       <li><a href="#">管理团队</a></li>
  251.                       <li><a href="#">工作机会</a></li>
  252.                       <li><a href="#">客服服务</a></li>
  253.                       <li><a href="#">帮助</a></li>
  254.                    </ul>
  255.               </div>
  256.            </div>
  257.            <!-- 右边内容三 -->
  258.          <div id="last4">
  259.               <div>
  260.                 <a href="#" id="yanse">关于学成网</a>
  261.                   <ul>
  262.                       <li><a href="#">关于</a></li>
  263.                       <li><a href="#">管理团队</a></li>
  264.                       <li><a href="#">工作机会</a></li>
  265.                       <li><a href="#">客服服务</a></li>
  266.                       <li><a href="#">帮助</a></li>
  267.                   </ul>
  268.                </div>
  269.            </div>
  270.        </div>
  271.     </div>
  272. </body>
  273. </html>

在css部分，每一个小部分都写有注释，可能写得不太好，仅供参考。

  1. /* 设置a标签样式 */
  2. a{
  3.     font-size: 19px;
  4.     text-decoration: none;
  5. }
  6. /* 鼠标点击样式 */
  7. a:hover{
  8.     border-bottom: 2px solid #00a4ff;
  9.     color: #00a4ff;
  10. }
  11. body{
  12.     margin: auto;
  13.     width: 1920px;
  14.     background-color: rgb(245, 238, 238);
  15. }
  16. *{
  17.     margin: 0;
  18.     padding: 0;
  19. }
  20. /* 设置头部部分 */
  21. #haeder{
  22.     height: 100px;
  23.     margin: auto;
  24.     /* background-color: paleturquoise; */
  25. }
  26. /* 设置导航栏样式 */
  27. #nav{
  28.     width: 1200px;
  29.     height: 100px;
  30.     margin-left: 180px;
  31.     /* background-color: rgb(250, 241, 240); */
  32. }
  33. /* logo样式 */
  34. #logo{
  35.     /* float: left; */
  36.     display: inline-block;
  37.     height: 100px;
  38.     width: 200px;
  39.     padding-top: 30px;
  40. }
  41. /* 设置words */
  42. #words{
  43.     margin-top: 30px;
  44.     /* float: left; */
  45.     display: inline-block;
  46.     margin-left: 50px;
  47. }
  48.  #words ul li{
  49.     display: inline-block;
  50. }
  51. #words ul li a{
  52.     height: 30px;
  53.     padding: 0 20px;
  54.     line-height: 20px;
  55. }
  56. /* 输入框样式 */
  57. #search{
  58.     margin-top: 30px;
  59.     display: inline-block;
  60.     margin-left: 30px;
  61. }
  62. /* 设置输入框样式 */
  63. #search input{
  64.     float: left;
  65.     width: 345px;
  66.     height: 40px;
  67.     border: 1px solid #00a4ff;
  68.     border-right: 0;
  69.     color: #bfbfbf;
  70.     font-size: 14px;
  71.     padding-left: 15px;
  72. }
  73. /* 设置搜索样式 */
  74. #search button{
  75.     width: 50px;
  76.     height: 42px;
  77.     background-color: blue;
  78.     border: 0;
  79.     background: url(btn.png);
  80. }
  81. /* 搜索图标 */
  82. #user{
  83.     float: right;
  84.     margin-top: 30px;
  85.     margin-right: 60px;
  86. }
  87. /* 设置banner样式 */
  88. #banner{
  89.     height: 400px;
  90.     background-color: #1c036b;
  91. }
  92. /* 设置cont图片样式 */
  93. #cont{
  94.     width: 1200px;
  95.     height: 400px;
  96.     margin-left: 180px;
  97.     background: url(banner2.png);
  98. }
  99. /* 侧导航栏部分 */
  100. #work{
  101.     display: inline-block;
  102.     padding-top: 20px;
  103.     height: 380px;
  104.     width: 200px;
  105.     line-height: 40px;
  106.     background-color: rgba(19, 2, 75, 0.5);
  107. }
  108. /* 清除work ul圆点标记 */
  109. #work ul{
  110.     list-style: none;
  111. }
  112. /* 设置li标签中文字间隔 */
  113. #work ul li{
  114.     padding-left: 30px;
  115. }
  116. /* 设置work里面a标签文字颜色 */
  117. #work ul li a{
  118.     color: white;
  119. }
  120. /* 右边表格部分 */
  121. #biaoge{
  122.     margin-top: 20px;
  123.     float: right;
  124.     height: 320px;
  125.     width: 230px;
  126.     background-color: white;
  127. }
  128. #biao1{
  129.     padding-top: 10px;
  130.     height: 40px;
  131.     width: 150px;
  132.     padding-left: 80px;
  133.     border-bottom: 1px solid black;
  134. }
  135. #biao2{
  136.     padding-left: 20px;
  137.     padding-top: 20px;
  138.     padding-bottom: 20px;
  139.     height: 40px;
  140. }
  141. /* 设置学习使用对象字体颜色 */
  142. #op{
  143.     color: darkgrey;
  144. }
  145. #biao3{
  146.     padding-left: 80px;
  147.     height: 40px;
  148.     border: 1px solid rgb(13, 113, 245);
  149. }
  150. /* 横向导航栏 */
  151. #transverse{
  152.     width: 1200px;
  153.     height: 50px;
  154.     margin-left: 180px;
  155.     background-color: white;
  156.     box-shadow: 5px 5px rgb(128, 128, 128,0.3);
  157. }
  158. /* 设置横向栏中w的样式 */
  159. #w{
  160.     padding-top: 10px;
  161.     display: inline-block;
  162.     height: 50px;
  163.     width: 600px;
  164. }
  165. #transverse ul li{
  166.     display: inline-block;
  167. }
  168. /* 设置transverse a标签 */
  169. #transverse ul li a{
  170.     text-align: center;
  171.     line-height: 30px;
  172.     height: 30px;
  173.     padding: 0 20px;
  174. }
  175. /* 设置精品推荐颜色 */
  176. #io{
  177.     color: aqua;
  178. }
  179. /* 设置修改兴趣样式 */
  180. #youbian{
  181.     float: right;
  182.     padding-right: 50px;
  183.     padding-top: 10px;
  184. }
  185. /* 设置结尾 */
  186. #ending{
  187.     margin-top: 20px;
  188.     width: 1200px;
  189.     height: 25px;
  190.     margin-left: 180px;
  191.     /* background-color: royalblue; */
  192. }
  193. /* 修改精品推荐 */
  194. #word1{
  195.     padding-left: 35px;
  196.     float: left;
  197. }
  198. /* 修改查看全部 */
  199. #word2{
  200.     padding-right: 35px;
  201.     float: right;
  202. }
  203. /* 图片部分 */
  204. #pic{
  205.     height: 600px;
  206.     width: 1200px;
  207.     margin-left: 180px;
  208. }
  209. /* 修改高级及1125人在线学习为行内块模式 */
  210. #cc,#dd{
  211.     display: inline-block;
  212. }
  213. /* 修改高级字体的颜色 */
  214. #cc{
  215.     color: rgb(241, 245, 19);
  216. }
  217. /* 修改1125在线学习字体的颜色 */
  218. #dd{
  219.     color: rgb(119, 116, 118);
  220. }
  221. /* 修改图片大小 */
  222. #pic img{
  223.     height: 200px;
  224.     width: 200px;
  225.     float: left;
  226. }
  227. /* 图片1部分 */
  228. #pic1{
  229.     margin-left: 35px;
  230.     float: left;
  231.     height: 280px;
  232.     width: 200px;
  233.     background-color: white;
  234. }
  235. /* 图片2部分 */
  236. #pic2{
  237.     margin-left: 35px;
  238.     float: left;
  239.     height: 280px;
  240.     width: 200px;
  241.     background-color: white;
  242.    
  243. }
  244. /* 图片3部分 */
  245. #pic3{
  246.     margin-left: 35px;
  247.     float: left;
  248.     height: 280px;
  249.     width: 200px;
  250.     background-color: white;
  251. }
  252. /* 图片4部分 */
  253. #pic4{
  254.     margin-left: 35px;
  255.     float: left;
  256.     height: 280px;
  257.     width: 200px;
  258.     background-color: white;
  259. }
  260. /* 图片5部分 */
  261. #pic5{
  262.     margin-left: 35px;
  263.     float: left;
  264.     height: 280px;
  265.     width: 200px;
  266.     background-color: white;
  267. }
  268. /* 图片6部分 */
  269. #pic6{
  270.     margin-top: 35px;
  271.     margin-left: 35px;
  272.     float: left;
  273.     height: 280px;
  274.     width: 200px;
  275.     background-color: white;
  276. }
  277. /* 图片7部分 */
  278. #pic7{
  279.     margin-top: 35px;
  280.     margin-left: 35px;
  281.     float: left;
  282.     height: 280px;
  283.     width: 200px;
  284.     background-color: white;
  285. }
  286. /* 图片8部分 */
  287. #pic8{
  288.     margin-top: 35px;
  289.     margin-left: 35px;
  290.     float: left;
  291.     height: 280px;
  292.     width: 200px;
  293.     background-color: white;
  294. }
  295. /* 图片9部分 */
  296. #pic9{
  297.     margin-top: 35px;
  298.     margin-left: 35px;
  299.     float: left;
  300.     height: 280px;
  301.     width: 200px;
  302.     background-color: white;
  303. }
  304. /* 图片10部分 */
  305. #pic10{
  306.     margin-top: 35px;
  307.     margin-left: 35px;
  308.     float: left;
  309.     height: 280px;
  310.     width: 200px;
  311.     background-color: white;
  312. }
  313. /* 最好结尾部分 */
  314. #last{
  315.     height: 250px;
  316.     background-color: white;
  317. }
  318. /* 给结尾部分p标签设置字体 */
  319. #last p{
  320.     font-size: 15px;
  321. }
  322. /* 设置左边内容样式 */
  323. #last1{
  324.     display: inline-block;
  325.    margin-left: 209px;
  326.     display: inline-block;
  327.     height: 250px;
  328.     width: 600px;
  329. }
  330. /* 下载APP盒子样式 */
  331. #box{
  332.     margin-top: 10px;
  333.     padding-top: 15px;
  334.     padding-left: 15px;
  335.    margin-left: 10px;
  336.     height: 40px;
  337.     width: 100px;
  338.     border: 2px solid lightskyblue;
  339. }
  340. /* 设置下载APP字体颜色 */
  341. #box a{
  342.     color: lightskyblue;
  343. }
  344. /* 右边内容部分 */
  345. #box2{
  346.     float: right;
  347.     margin-right: 50px;
  348.     margin-top: 30px;
  349.     height: 200px;
  350.     width: 600px;
  351. }
  352. /* 设置关于学成网字体颜色 */
  353. #box2 #yanse{
  354.     color: blue;
  355. }
  356. /* 右边部分内容一 */
  357. #last2{
  358.     float: left;
  359.     height: 200px;
  360.     width: 100px;
  361. }
  362. /* 清除ul圆点标记 */
  363. #last2 ul{
  364.     list-style: none;
  365. }
  366. /* 右边部分内容二 */
  367. #last3{
  368.     float: left;
  369.     margin-left: 95px;
  370.     height: 200px;
  371.     width: 100px;
  372. }
  373. /* 清除ul圆点标记 */
  374. #last3 ul{
  375.     list-style: none;
  376. }
  377. /* 右边内容部分三 */
  378. #last4{
  379.     float: left;
  380.     margin-left: 95px;
  381.     height: 200px;
  382.     width: 100px;
  383. }
  384. /* 清除ul圆点标记 */
  385. #last4 ul{
  386.     list-style: none;
  387. }

效果如图：

标签： html5 css
本文转载自: https://blog.csdn.net/weixin_52121522/article/details/129697751
版权归原作者 jsndhx 所有， 如有侵权，请联系我们删除。
登录后发布评论

“HTML前端静态网页制作”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。