用html和css创建一个最基本的网页

已于 2023-08-14 16:57:41 修改
阅读量981 收藏 26
点赞数 1
文章标签： html css 前端
于 2023-08-14 16:52:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2202_75879208/article/details/132279415
版权

1.登录页面

2.主网页

3.副网页

 代码部分（主网页）：

html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>开心超市-综合超市首选-低价环保、卫生健康、时令水果、新鲜菜品、买得放心，买的安心</title>
  8.     <meta name="description" content="开水果心超市-专业的网上购物商城，销售家电，水果蔬菜，母婴，服装，百货，各种新鲜食品等多个优质产品，诚信的服务为您提供高质量产品与服务">
  9.     <meta name="keywords" content="网上购物，网上商城，蔬菜，家电">
  10.     <!-- TDK三大标签SEO优化 -->
  11.     <link rel="stylesheet" href="css/base.css">
  12.     <link rel="stylesheet" href="css/common.css">
  13.     <link rel="stylesheet" href="css/index.css">
  14.     <link rel="shortcut icon" href="favicon.ico">
  15.     <!-- 比特虫生成 -->
  16. </head>
  18. <body>
  19.     <!-- 快捷导航模块shortcut -->
  20.     <section class="shortcut">
  21.         <div class="w">
  22.             <div class="fl">
  23.                 <ul>
  24.                     <li>欢迎来到开心超市！</li>
  25.                     <li>
  26.                         <a href="#">请登录</a> <a href="register.html" style="color: red;">免费注册</a>
  27.                     </li>
  28.                 </ul>
  29.             </div>
  30.             <div class="fr">
  31.                 <ul>
  32.                     <li>我的订单</li>
  33.                     <li></li>
  34.                     <li>开心会员</li>
  35.                     <li></li>
  36.                     <li>客服服务</li>
  37.                     <li></li>
  38.                     <li>网站导航</li>
  39.                 </ul>
  40.             </div>
  41.         </div>
  42.     </section>
  43.     <!-- 头部header -->
  44.     <header>
  45.         <div class="logo">
  46.             <h1>
  47.                 <a href="index.html" title="开心超市">开心超市</a>
  48.             </h1>
  49.             <div class="search">
  50.                 <input type="search" name="" id="" placeholder=" 优质物品">
  51.                 <button>搜索</button>
  52.             </div>
  53.         </div>
  54.         <div class="hotwords">
  55.             <a href="#">优惠购首发</a>
  56.             <a href="#">亿元优惠</a>
  57.             <a href="#">9.9团购</a>
  58.             <a href="#">满一百减40</a>
  59.             <a href="#">家电</a>
  60.             <a href="#">水果蔬菜</a>
  61.         </div>
  62.     </header>
  63.     <div class="nav">
  64.         <div class="nav1"></div>
  65.         <div class="w">
  66.             <div class="dropdown">
  67.                 <div class="dt">商品分类</div>
  68.                 <div class="dd">
  69.                     <ul>
  70.                         <li><a href="#">家用电器</a></li>
  71.                         <li><a href="#">手机</a>、<a href="#">电脑</a>、<a href="#">平板</a></li>
  72.                         <li><a href="#">水果</a>、<a href="#">蔬菜</a>、<a href="#">熟食</a></li>
  73.                         <li><a href="#">母婴</a>、<a href="#">玩具</a></li>
  74.                         <li><a href="#">男装</a>、<a href="#">女装</a></li>
  75.                         <li><a href="#">清洁用品</a>、<a href="#">化妆品</a>、<a href="#">包包</a></li>
  76.                         <li><a href="#">家用电器</a></li>
  77.                         <li><a href="#">手机</a>、<a href="#">电脑</a>、<a href="#">平板</a></li>
  78.                         <li><a href="#">水果</a>、<a href="#">蔬菜</a>、<a href="#">熟食</a></li>
  79.                         <li><a href="#">母婴</a>、<a href="#">玩具</a></li>
  80.                         <li><a href="#">男装</a>、<a href="#">女装</a></li>
  81.                         <li><a href="#">清洁用品</a>、<a href="#">化妆品</a>、<a href="#">包包</a></li>
  82.                         <li><a href="#">娱乐</a>、<a href="#">游戏</a></li>
  83.                     </ul>
  84.                 </div>
  85.             </div>
  86.             <div class="navitems">
  87.                 <ul>
  88.                     <li><a href="#">蔬菜</a></li>
  89.                     <li><a href="#">水果</a></li>
  90.                     <li><a href="#">服装</a></li>
  91.                     <li><a href="#">鞋子</a></li>
  92.                     <li><a href="#">男装</a></li>
  93.                     <li><a href="list.html">女装</a></li>
  94.                     <li><a href="#">帽子</a></li>
  95.                     <li><a href="#">袜子</a></li>
  96.                 </ul>
  97.             </div>
  98.         </div>
  99.     </div>
  100.     <div class="n">
  101.         <div class="main">
  102.             <div class="focus">
  103.                 <ul>
  104.                     <li>
  105.                         <img src="image/4.jpg" alt="">
  106.                     </li>
  107.                 </ul>
  108.             </div>
  109.             <div class="newsflash">
  110.                 <div class="top">评优购快报
  111.                     <div class="top1">
  112.                         <p><a href="">更多...</a></p>
  113.                     </div>
  114.                 </div>
  115.                 <div class="banner">
  116.                     <p>【特惠】爆款耳机5折</p>
  117.                     <p>【特惠】爆款家具5折</p>
  118.                     <p>【特惠】新鲜水果6折</p>
  119.                     <p>【特惠】家电买一送一</p>
  120.                     <p>【特惠】母婴满100减30</p>
  121.                     <p>【特惠】特价商品</p>
  122.                     <p>【特惠】女生用品打折</p>
  123.                 </div>
  124.                 <div class="dazhe">
  125.                     <ul>
  126.                         <li>
  127.                             <img src="image/5.jpg" alt="">
  128.                         </li>
  129.                     </ul>
  130.                 </div>
  131.             </div>
  133.         </div>
  134.     </div>
  135.     <div class="w recom">
  136.         <div class="recom_hd">
  137.             <img src="image/6.jpg" alt="">
  139.         </div>
  140.         <div class="recom_bd">
  141.             <ul>
  142.                 <li> <img src="image/7.png" alt=""></li>
  143.                 <li><img src="image/8.png" alt=""></li>
  144.                 <li><img src="image/9.png" alt=""></li>
  145.                 <li><img src="image/7.png" alt=""></li>
  146.             </ul>
  147.         </div>
  148.     </div>
  149.     <!-- 楼层区 -->
  150.     <div class="floor">
  151.         <div class="w jiadian">
  152.             <div class="box_hd">
  153.                 <h3>家用电器</h3>
  154.                 <div class="tab_list">
  155.                     <ul>
  156.                         <li><a href="#" style="color: crimson;">热门</a></li>
  157.                         <li><a href="#">生活电器</a></li>
  158.                         <li><a href="#">居家电话</a></li>
  159.                         <li><a href="#">护肤管理</a></li>
  160.                         <li><a href="#">求助电话</a></li>
  161.                         <li><a href="#">特价商品</a></li>
  162.                     </ul>
  163.                 </div>
  164.             </div>
  165.             <div class="box_bd">
  166.                 <div class="tab_content">
  167.                     <div class="tab_content_item">
  168.                         <div class="col_1">
  169.                             <ul>
  170.                                 <li><a href="#">节能补贴</a>>
  171.                                 <li><a href="#">节能补贴</a></li>
  172.                                 <li><a href="#">节能补贴</a></li>
  173.                                 <li><a href="#">节能补贴</a></li>
  174.                                 <li><a href="#">节能补贴</a></li>
  175.                                 <li><a href="#">节能补贴</a></li>
  176.                             </ul>
  177.                             <img src="image/10.png" alt="">
  178.                         </div>
  179.                         <div class="col_2">
  180.                             <img src="image/12.png" alt="">
  181.                         </div>
  182.                         <div class="col_3">
  183.                             <img src="image/15.png" alt="">
  184.                             <img src="image/14.png" alt="">
  185.                         </div>
  186.                         <div class="col_4">
  187.                             <img src="image/16.png" alt="">
  188.                             <p>正宗好货，买的放心买的安心，值得拥有,快去抢购把</p>
  189.                         </div>
  190.                         <div class="col_5">
  191.                             <img src="image/17.png" alt="">
  192.                         </div>
  193.                     </div>
  194.                 </div>
  195.             </div>
  196.         </div>
  197.     </div>
  198.     <!-- 底部模块start -->
  199.     <footer class="footer">
  200.         <div class="w">
  201.             <div class="mod_left">
  202.                 <ul>
  203.                     <li>
  204.                         <h1></h1>
  205.                         <h2>正品保障</h2>
  206.                         <p>正品保障，提供发货</p>
  207.                     </li>
  208.                     <li>
  209.                         <h1></h1>
  210.                         <h2>正品保障</h2>
  211.                         <p>正品保障，提供发货</p>
  212.                     </li>
  213.                     <li>
  214.                         <h1></h1>
  215.                         <h2>正品保障</h2>
  216.                         <p>正品保障，提供发货</p>
  217.                     </li>
  218.                     <li>
  219.                         <h1></h1>
  220.                         <h2>正品保障</h2>
  221.                         <p>正品保障，提供发货</p>
  222.                     </li>
  223.                 </ul>
  224.             </div>
  225.             <div class="mod_right">
  226.                 <ul>
  227.                     <li class="b"><a href="#">购物指南</a></li>
  228.                     <li><a href="#">优秀品牌</a></li>
  229.                     <li><a href="#">保质保量</a></li>
  230.                     <li><a href="#">值得信赖</a></li>
  231.                     <li><a href="#">常见问题</a></li>
  232.                     <li><a href="#">服务</a></li>
  233.                 </ul>
  234.                 <ul>
  235.                     <li class="b"><a href="#">购物指南</a></li>
  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.                 <ul>
  243.                     <li class="b"><a href="#">购物指南</a></li>
  244.                     <li><a href="#">优秀品牌</a></li>
  245.                     <li><a href="#">保质保量</a></li>
  246.                     <li><a href="#">值得信赖</a></li>
  247.                     <li><a href="#">常见问题</a></li>
  248.                     <li><a href="#">服务</a></li>
  249.                 </ul>
  250.                 <ul>
  251.                     <li class="b"><a href="#">购物指南</a></li>
  252.                     <li><a href="#">优秀品牌</a></li>
  253.                     <li><a href="#">保质保量</a></li>
  254.                     <li><a href="#">值得信赖</a></li>
  255.                     <li><a href="#">常见问题</a></li>
  256.                     <li><a href="#">服务</a></li>
  257.                 </ul>
  258.             </div>
  259.         </div>
  260.         <div class="s">
  261.             <div class="last_top">
  262.                 <ul>
  263.                     <li><a href="#">关于我们</a></li>
  264.                     <li></li>
  265.                     <li><a href="#">联系我们</a></li>
  266.                     <li></li>
  267.                     <li><a href="#">联系客服</a></li>
  268.                     <li></li>
  269.                     <li><a href="#">商家注入</a></li>
  270.                     <li></li>
  271.                     <li><a href="#">销售中心</a></li>
  272.                     <li></li>
  273.                     <li><a href="#">友谊链接</a></li>
  274.                     <li></li>
  275.                     <li><a href="#">超市社区</a></li>
  276.                     <li></li>
  277.                     <li><a href="#">开心公益</a></li>
  278.                     <li></li>
  279.                     <li><a href="#">English Site</a></li>
  280.                 </ul>
  281.             </div>
  282.             <div class="last_button">
  283.                 <p>地址：陕西省西安市XXXXXXXX 邮编：707100 电话：0911-535363 邮箱：533535355@qq.com</p>
  284.                 <p>开心超市ICP备089997877号 开心网安备11029323982</p>
  285.             </div>
  286.         </div>
  287.     </footer>
  288. </body>
  290. </html>

css部分：

  1. body {
  2.     width: 1400px;
  3.     padding: 0;
  4.     margin: 0 auto;
  5.     border: 1px solid #dcd6d6;
  6. }
  8. .w {
  9.     width: 1200px;
  10.     margin: 0 auto;
  11. }
  13. .fl {
  14.     float: left;
  15. }

  16.  
  17. .fr {
  19.     float: right;
  20. }
  22. .shortcut {
  23.     height: 32px;
  24.     background-color: #f1f1f1;
  25.     line-height: 32px;
  26. }
  28. .shortcut ul li {
  29.     float: left;
  30.     list-style: none;
  31.     margin-top: -18px;
  32. }
  34. .shortcut ul li a {
  35.     text-decoration: none;
  36. }
  38. /* .shortcut ul li:hover {
  39.     color: brown;
  40. } */
  41. .shortcut .fr ul li:nth-child(even) {
  42.     width: 1px;
  43.     height: 12px;
  44.     background-color: #666;
  45.     margin: -7px 15px 0
  46. }
  48. header {
  49.     margin: 0 auto;
  50.     width: 1200px;
  51.     height: 150px;
  52.     /* background-color: aquamarine; */
  53. }
  55. .logo {
  56.     position: absolute;
  57.     margin: 0 auto;
  58.     top: 1px;
  59.     margin-top: 35px;
  60.     margin-left: 0px;
  61.     width: 200px;
  62.     height: 100px;
  63.     /* background-color: burlywood; */
  64. }
  66. .logo a {
  67.     display: block;
  68.     margin-left: 50px;
  69.     width: 100px;
  70.     height: 78px;
  71.     background-image: url(../image/3.jpg);
  72.     background-position: -9px -9px;
  73.     background-repeat: no-repeat;
  74.     text-indent: -9999px;
  75.     overflow: hidden;
  76. }
  78. .search {
  79.     margin: -80px 450px;
  80.     left: 4500px;
  81.     top: 32px;
  82.     width: 600px;
  83.     height: 36px;
  84.     border: 2px solid red;
  85. }
  87. button,
  88. input {
  90.     font-family: "宋体";
  91.     /* 默认有灰色边框，去掉 */
  92.     border: 0;
  93.     /* 蓝色边框去掉 */
  94.     outline: none;
  95.     font-size: 20px;
  96. }
  98. .search input {
  99.     float: left;
  100.     width: 500px;
  101.     height: 36px;
  102.     padding-left: 10px;
  103. }
  105. .search button {
  106.     float: right;
  107.     width: 100px;
  108.     height: 37px;
  109.     background-color: rgb(217, 99, 99);
  110.     font-size: 30px;
  111. }
  113. .hotwords {
  114.     position: relative;
  115.     top: 112px;
  116.     left: 450px;
  117.     width: 630px;
  119. }
  121. .hotwords a {
  122.     font-size: 20px;
  123.     margin: 0 10px;
  124.     text-decoration: none;
  125.     color: #747a76;
  127. }
  129. .nav1 {
  130.     width: 1400px;
  131.     position: relative;
  132.     margin: 0 auto;
  133.     margin-top: 40px;
  134.     border: 2px solid rosybrown;
  135. }
  137. .nav .dropdown {
  138.     float: left;
  139.     width: 300px;
  140.     height: 50px;
  141.     margin: -53px 0px;
  142.     background-color: rgb(231, 171, 160);
  144. }
  146. .nav .navitems {
  147.     float: left;
  148.     margin: -52px 0px;
  150. }
  152. .dropdown .dt {
  153.     width: 100%;
  154.     height: 50px;
  155.     text-align: center;
  156.     line-height: 50px;
  157.     font-size: 25px;
  158.     /* border: solid; */
  159. }
  161. .dropdown .dd {
  162.     position: absolute;
  163.     width: 300px;
  164.     height: 500px;
  165.     margin-top: 3px;
  166.     background-color: rgb(137, 75, 70);
  167. }
  169. .dropdown .dd ul li {
  170.     width: 300px;
  171.     height: 35px;
  172.     line-height: 32px;
  173.     list-style: none;
  174.     margin-left: -40px;
  175.     /* border: solid; */
  176.     text-indent: 2em;
  177. }

  178.  
  179. .dropdown .dd ul li:hover {
  180.     background-color: #fff;
  181. }
  183. .dropdown .dd ul li a {
  184.     font-size: 24px;
  185.     color: #fff;
  186.     text-decoration: none;
  187. }
  189. .dropdown .dd ul li:hover a {
  190.     color: rgb(222, 39, 26);
  191. }
  193. .navitems {
  194.     position: relative;
  195.     left: 350px;
  196.     height: 40px;
  197.     /* background-color: aqua; */
  198. }
  200. .navitems ul li {
  201.     margin-left: 400px;
  202.     float: left;
  203.     margin: 5px 20px;
  204.     list-style: none;
  205.     margin-top: -1px;
  206. }
  208. .navitems ul li a {
  209.     float: left;
  210.     text-decoration: none;
  211.     font-size: 25px;
  212.     color: #918484;
  213. }
  215. .navitems ul li a:hover {
  216.     color: red;
  217. }
  219. /* footer */
  220. .footer {
  221.     clear: both;
  222.     margin-left: 100px;
  223.     height: 600px;
  224.     width: 1400px;
  225.     margin: 0 auto;
  226.     background-color: #f5f5f5;
  227. }
  229. .footer .w {
  230.     width: 1400px;
  231. }
  233. .mod_left {
  234.     height: 120px;
  235.     border-bottom: 1px solid #ccc;
  236. }
  238. .mod_left ul li {
  239.     float: left;
  240.     margin-left: 70px;
  241.     width: 240px;
  242.     height: 100px;
  243.     background-color: rgb(195, 210, 204);
  244.     list-style: none;
  245. }
  247. .mod_left ul li h1 {
  248.     display: block;
  249.     margin-left: 10px;
  250.     width: 20px;
  251.     height: 20px;
  252.     border-radius: 50%;
  253.     background-color: aquamarine;
  254. }
  256. .mod_left ul li h2 {
  257.     margin-left: 50px;
  258.     margin-top: -50px;
  259. }
  261. .mod_left ul li p {
  262.     font-size: 20px;
  263.     margin-left: 30px;
  264. }
  266. .mod_right {
  267.     height: 250px;
  268. }
  270. .mod_right ul li {
  271.     margin-top: 10px;
  272.     list-style: none;
  273.     font-size: 20px;
  274.     text-align: center;
  275.     margin-left: 60px;
  276. }
  278. .mod_right .b {
  279.     font-size: 26px;
  280.     color: #747a76;
  281. }
  283. .mod_right ul {
  284.     float: left;
  285.     margin-left: 100px;
  287. }
  289. .mod_right ul li a {
  290.     text-decoration: none;
  291.     color: #918484;
  292. }
  294. .mod_right ul li a:hover {
  295.     color: rgb(220, 39, 51);
  296. }
  298. /* .s {
  299.     height: 300px;
  300. } */
  302. .last_top {
  303.     width: 1400px;
  304.     border: 1px solid #ccc;
  305.     height: 0px;
  306.     margin-top: 30px;
  307. }
  309. .last_top ul {
  310.     margin-top: 40px;
  311.     margin-left: 230px;
  312. }
  314. .last_top ul li {
  315.     font-size: 16px;
  316.     float: left;
  317.     list-style: none;
  318.     margin: 0 6px;
  319. }
  321. .last_top ul li a {
  322.     text-decoration: none;
  323.     color: #918484;
  324. }
  326. .last_top ul li a:hover {
  327.     color: red;
  328. }
  330. .last_top ul li:nth-child(even) {
  331.     height: 20px;
  332.     width: 1px;
  333.     background-color: #a79797;
  334. }
  336. .last_button {
  337.     margin-top: 80px;
  338.     margin-left: 60px;
  339.     height: 60px;
  340.     width: 1200px;
  341.     color: #5c5252;
  342. }
  344. .last_button p {
  345.     width: 1100px;
  346.     text-align: center;
  347. }
爱吃水果的兔子
关注
  • 1
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用HTML+CSS制作一个简单的网页
m0_57423785的博客
11-25 1万+
简单学习了一下HTML和CSS，制作了下面这个网页（第一次做还在学习中），里面包含一些基础的布局包括导航条、分页栏、悬浮列表等内容。
HTML+CSS个人静态网页设计
aghewugwe的博客
08-13 3万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
HTML+css网页设计
2301_76192170的博客
07-04 4993
<a href="#">关于我们</a></li><li><a href="#">联系方式</a></li><li><a href="#">首页</a>版权所有 © 2023 我的网页我的网页
Dreamweaver网页作业——紫罗兰永恒花园动漫价绍网页 7页，含有table表格，js表单验证还有首页视频。以及列表页。浮动布局。div+css+js
HTML网页设计
07-28 7271
1网页简介此作品为学生个人主页网页设计题材，HTML+CSS布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平,非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用技术方面主要应用了网页知识中的Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。......
HTML+CSS+JS网页设计
热门推荐
m0_73738929的博客
04-15 4万+
HTML页面主要由：登录、注册跳转页面，轮播图，家乡简介，热门景点，特色美食等组成。通过Div+CSS、鼠标滑过特效、获取当前时间，跳转页面、基本所需的知识点全覆盖。提示：以下是本篇文章正文内容，下面案例可供参考。
制作一个简单HTML静态网页（HTML+CSS）
专注于dreamweaver网页设计制作
01-02 8372
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
html+css制作简单网页界面
最新发布
qq_64867440的博客
10-25 4456
section>、、、 等标签被称为语义化标签（semantic tags），它们不仅仅是用来美化页面的，更重要的是它们能够为页面的结构和内容提供更加合适的语义化描述，从而有助于提高页面的可访问性和可维护性。使用这些语义化标签能够使 HTML 结构更加清晰、易于理解和维护，同时能够使搜索引擎更容易理解页面的结构和内容，提高网站的搜索排名。
用HTML和CSS制作一个网页
qq_52919150的博客
02-06 609
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 去除浏览器默认样式 */ * { padding: 0px; margin: 0px; } /* 顶部线条 */ .top_line { width: 1200px.
HTML和CSS代码示例创建一个爱心形状的图案
10-18
html爱心代码 这段代码使用CSS伪元素 ::before 和 ::after 来创建一个心形图案。你可以将这段HTML代码插入到你的网页中，以在网页上显示一个爱心形状。根据你的需要，你可以调整样式和尺寸。
制作一个简单HTML电影网页设计（HTML+CSS）
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
HTML5和CSS3让网页设计提升到下一个高度
01-19
Web设计师可以使用HTML4和CSS2.1完成一些很酷的东西。我们可以在不使用陈旧的基于table布局的基础上完成文档逻辑结构并创建 内容丰富的网站。我们可以在不使用内联和 标签的基础上对网站添加漂亮而细腻的风格样式...
制作一个简单HTML中华传统文化网页（HTML+CSS）
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
创建网页 CSS HTML Notepad v1.0
11-08
CSS HTML Notepad是一个易于使用的应用程序，它可以帮助你创建网页。该应用程序具备一个即时预览界面，你可以实时看到正在编辑页面的效果，也可以通过内置的浏览器检查选项来查看不
【HTML网页设计 + CSS样式表】详细记录 / 含代码 by.Akaxi
Akaxi的博客
10-12 5756
【HTML网页设计 + CSS样式表】详细记录 / 含代码
用HTML+CSS做一个漂亮简单的个人网页（第二篇）
qq_42523321的博客
06-10 3万+
个人网页设计及代码
【html+css网站设计】
qq_26930625的博客
06-30 845
HTML：超文本标记语言作用：写网页结构内容 例如：图片、文字、视频等文件后缀：.html 或者 .htm。
使用HTML和CSS编写一个基本网页的模板
06-03
以下是一个基本的HTML和CSS网页模板示例： ```html <!DOCTYPE html> <html> <title>My Random Page body { background-color: #f2f2f2; font-family: Arial, sans-serif; } h1 { color: blue...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值