devbox
编程变革者
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

[HTML]Web前端开发技术12（HTML5、CSS3、JavaScript ）——喵喵画网页

作者：编程变革者 | 2024-01-30 20:25:03

赞

踩

[HTML]Web前端开发技术12（HTML5、CSS3、JavaScript ）——喵喵画网页

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

目录

前言

网页标题：三列自适应宽度

网页标题：多行三列自适应宽度

一级水平导航菜单：采用“无序列表+超链接”设计

纵向导航菜单

总结

前言

两日一更，今天也是准时报到的一天，喵~

网页标题：三列自适应宽度

  • 网页的主体部分代码自行完善
  • 使用外部样式表为其设置样式，在CSS文件夹下新建样式表文件style6.css 
    1. @charset "utf-8";
    2. /* CSS Document */
    3. *{padding:0px;margin:0px;}
    4. #left{width:30%;height:700px;background:#223344;float:left;}
    5. #center{width:50%;height:700px;background:#553344; float:left;}
    6. #right{width:20%;height:700px;background:#993344; float:left;}
    7.
  • 自行完成样式设置（提示：自适应宽度用%为单位即可）
  1. <!doctype html>
  2. <html>
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <link rel="stylesheet" href="css/style6.css" type="text/css">
  6.   <title>三列模式布局</title>
  7.  </head>
  8.  <body>
  9.   <div id="left" class="">left</div>
  10. 	<div id="center" class="">center</div>
  11. 	<div id="right" class="">right</div>
  12.  </body>
  13. </html>

  • 网页标题：多行三列自适应宽度

  • 网页的主体部分代码自行完善
  • 使用外部样式表为其设置样式，在CSS文件夹下新建样式表文件style7.css
    1. *{font-size: 16px;margin: 0 auto;padding: 0;}
    2. #container{background: #334455;width: 100%;height: 700px;}
    3. #header{background: #FF4455;width: 100%;height: 150px;}
    4. #logo{background: #FFDD55;width: 100%;height: 100px;}
    5. #nav{background: #FFDD99;width: 100%;height: 50px;}
    6. #main{background: #33DD55;width: 100%;height: 500px;}
    7. #left{background: #33FBFB;width: 33%;height: 100%;float: left;}
    8. #left_up_1{background: #334455;width: 100%;height: 125px;}
    9. #left_up_2{background: #445566;width: 100%;height: 125px;}
    10. #left_down_1{background: #556677;width: 100%;height: 125px;}
    11. #left_down_2{background: #667788;width: 100%;height: 125px;}
    12. #center{background: #88FBFB;width: 34%;height: 100%;float: left;}
    13. #center_up{background: #66ff66;width: 100%;height: 200px;}
    14. #center_down{background: #44DD22;width:100%;height:300px;}
    15. #right{background: #DDFBFB;width: 33%;height: 100%;float: left;}
    16. #right_up{background: #55DDFB;width: 100%;height: 150px;}
    17. #right_down{background: #667733;width:100%;height: 350px;}
    18. #footer{background: #DDDD11;width: 100%;height: 50px;clear: both;}
    19.

    自行完成样式设置（提示：自适应宽度用%为单位即可）
  1.  
  2. <!-- edu_10_1_5.html -->
  3. <!doctype html>
  4. <html lang="en">
  5.  <head>
  6.   <meta charset="UTF-8">
  7.   <meta name="Generator" content="EditPlus®">
  8.   <meta name="Author" content="">
  9.   <meta name="Keywords" content="">
  10.   <meta name="Description" content="">
  11.   <title>多行三列模式布局</title>
  12.    <link rel="stylesheet" href="css/style7.css" type="text/css">
  13.  </head>
  14.  <body>
  15.  <div id="container" class="">
  16.     <div id="header" class="">
  17. 		  <div id="logo" class="">logo</div>		  
  18. 		  <div id="nav" class="">nav</div>			
  19.     </div>
  20. 		<div id="main" class="">
  21.       <div id="left" class="">
  22.         <div id="left_up_1" class="">left_up_1</div>
  23.         <div id="left_up_2" class="">left_up_2</div>
  24.         <div id="left_down_1" class="">left_down_1</div>
  25.         <div id="left_down_2" class="">left_down_2</div>
  26. 			</div>
  27. 		  <div id="center" class="">
  28.         <div id="center_up" class="">center_up</div>
  29.         <div id="center_down" class="">center_down</div>
  30. 			</div>
  31. 		  <div id="right" class="">
  32. 			 <div id="right_up" class="">right_up</div>
  33.         <div id="right_down" class="">right_down</div>
  34. 			</div>			
  35. 		</div>
  36. 		<div id="footer" class="">footer</div>	
  37.  </div>  
  38.  </body>
  39. </html>

一级水平导航菜单：采用“无序列表+超链接”设计

  • 网页标题：一级水平导航菜单
  • 网页的主体部分代码为：

<div id="nav">

         <ul>

             <li><a href="#">首页</a></li>

        <li><a href="#">jQuery特效</a></li>

        <li><a href="#">JavaScript特效</a></li>

        <li><a href="#">Flash特效</a></li>

        <li><a href="#">div+css教程</a></li>

                <li><a href="#">HTML5教程</a></li>

    </ul>

</div>

  • 使用外部样式表为其设置样式，在CSS文件夹下新建样式表文件style8.css
    1. @charset "utf-8";
    2. /* CSS Document */
    3. ul{
    4. 	margin:0;
    5. 	padding:0;
    6. }
    7.  
    8. ul li{
    9. 	height:30px;
    10. 	width:115px;
    11. 	list-style-type:none;
    12. 	float:left;
    13. 	font:0.9em Arial, Helvetica, sans-serif;
    14. 	text-align:center;
    15. 	/*display:inline;*/
    16. }
    17.  
    18. ul li a{
    19. 	color:#fff;
    20. 	width:113px;
    21. 	margin:0px;
    22. 	padding:0 0 0 8px;
    23. 	display:inline-block; /*display:block;*/
    24. 	background:#808080;
    25. 	line-height:29px;
    26. 	border-right:1px solid #ccc;
    27. 	border-bottom:1px solid #ccc;
    28. 	text-decoration:none;
    29. }
    30. ul li a:hover{
    31. 	background-color:#666;
    32. 	border-bottom:1px dashed #ff0000;
    33. }
  • 并设置如下样式：
    • 设置ul的样式：内外边距均为0
    • 设置ul下li的样式为：高30px，宽115px，不显示项目符号，向左浮动，字体大小0.9em，字体为Arial系列字体，文本居中对齐。
    • 设置ul li下a的样式为：字体颜色为白色，宽113px，行高29px，修改元素显示类型为inline-block，背景颜色为#808080，外边距为0，左内边距为8px，其余内边距均为0，设置右和下边框线为1px 实线 #ccc，取消下划线。
    • 设置ul li下鼠标悬停时超链接a的样式为：背景颜色#666，下边框线1px 虚线 #ff0000。

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>一级水平导航菜单</title>
  6. <link rel="stylesheet" href="css/style8.css"
  7. </head>
  8.  
  9. <body>
  10. <div id="nav">
  11. 	<ul>
  12.     	<li><a href="#">首页</a></li>
  13.         <li><a href="#">jQuery特效</a></li>
  14.         <li><a href="#">JavaScript特效</a></li>
  15.         <li><a href="#">Flash特效</a></li>
  16.         <li><a href="#">div+css教程</a></li>
  17.  		<li><a href="#">HTML5教程</a></li>
  18.     </ul>
  19. </div>
  20. </body>
  21. </html>

纵向导航菜单

  • 网页标题：纵向导航菜单
  • 网页的主体部分代码为：

<div id="nav">

         <ul>

             <li><a href="#">首页</a></li>

        <li><a href="#">jQuery特效</a></li>

        <li><a href="#">JavaScript特效</a></li>

        <li><a href="#">Flash特效</a></li>

        <li><a href="#">div+css教程</a></li>

                <li><a href="#">HTML5教程</a></li>

    </ul>

</div>

  • 使用外部样式表为其设置样式，在CSS文件夹下新建样式表文件style9.css
    1. @charset "utf-8";
    2. /* CSS Document */
    3. #nav{
    4. 	width:200px;
    5. 	font:0.9em Arial, Helvetica, sans-serif;
    6. }
    7.  
    8. #nav ul{
    9. 	padding:0;
    10. 	margin:0;
    11. 	list-style-type:none;
    12. }
    13. #nav ul li{
    14. 	border-bottom:1px solid #ed9f9f;
    15. }
    16. #nav ul li a{
    17. 	display:block;
    18. 	padding:5px 5px 5px 0.5em;
    19. 	text-decoration:none;
    20. 	border-left:12px solid #711515;
    21. 	border-right:1px solid #711515;
    22. }
    23.  
    24. #nav ul li a:link,#nav ul li a:visited{
    25. 	background-color:#c11136;
    26. 	color:#fff;
    27. }
    28.  
    29. #nav ul li a:hover{
    30. 	background-color:#990020;
    31. 	color:#ff0;
    32. }

  • 并设置如下样式：
    • #nav的样式:宽200px，字体为Arial系列
    • #nav下ul标签的样式：取消列表项标志，内外边距均为0
    • #nav下li的样式：下边框线1px 实线 #ed9f9f
    • #nav下li中a标签的样式：显示为块级元素，上右下内边距为5px，左内边距为0.5em，无下划线，左边框线12px 实线 #711515，右边框线1px实线 #711515
    • #nav下li中未访问过的超链接以及已访问过的超链接样式：背景颜色为#c11136，字体颜色#fff。
    • #nav下li中鼠标悬停时的超链接样式：背景颜色#990020，字体颜色#ff0

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>纵向导航菜单</title>
  6. <link rel="stylesheet" href="CSS/style9.css">
  7. </head>
  8.  
  9. <body>
  10. <div id="nav">
  11. 	<ul>
  12.     	<li><a href="#">首页</a></li>
  13.         <li><a href="#">jQuery特效</a></li>
  14.         <li><a href="#">JavaScript特效</a></li>
  15.         <li><a href="#">Flash特效</a></li>
  16.         <li><a href="#">div+css教程</a></li>
  17.  		<li><a href="#">HTML5教程</a></li>
  18.     </ul>
  19. </div>
  20. </body>
  21. </html>

总结

可以自己写写，挺好玩的！需要材料包的佬佬，欢迎来私信本喵！

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/49178
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号