• 【html-CSS布局】简单设计一个静态网页

    html常用的标签属性：

    * 注释：
            *

    to

    ：标题标签
                * h1~h6:字体大小逐渐递减
            *

    ：段落标签
            *
    ：换行标签
            *

    ：展示一条水平线
                * 属性：
                    * color：颜色
                    * width：宽度
                    * size：高度
                    * align：对其方式
                        * center：居中
                        * left：左对齐
                        * right：右对齐
            * ：字体加粗
            * ：字体斜体
            * :字体标签
            *
    :文本居中
                * 属性：
                    * color：颜色
                    * size：大小
                    * face：字体

            * 属性定义：
                * color：
                    1. 英文单词：red,green,blue
                    2. rgb(值1，值2，值3)：值的范围：0~255  如  rgb(0,0,255)
                    3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF
                * width：
                    1. 数值：width='20' ,数值的单位，默认是 px(像素)
                    2. 数值%：占比相对于父元素的比例

    超链接：

    * a:定义一个超链接
                * 属性：
                    * href：指定访问资源的URL(统一资源定位符)
                    * target：指定打开资源的方式
                        * _self:默认值，在当前页面打开
                        * _blank：在空白页面打开

    文字

    表格标签：


            * table：定义表格
                * width：宽度
                * border：边框
                * cellpadding：定义内容和单元格的距离
                * cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
                * bgcolor：背景色
                * align：对齐方式
            * tr：定义行
                * bgcolor：背景色
                * align：对齐方式
            * td：定义单元格
                * colspan：合并列
                * rowspan：合并行
            * th：定义表头单元格
            * ：表格标题
            * ：表示表格的头部分
            * ：表示表格的体部分
            * ：表示表格的脚部分

    实战练习：

    1. 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>魈魈快乐窝title>
    8.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    9.     <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">script>
    10.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous">script>
    11.     <link rel="stylesheet" href="./style001.css">
    12. head>
    13. <body>
    14. <div class="gongjvlan">
    15.     <span class="gongjvlan">                            span>
    16.     <span class="gongjvlan">所属国家-璃月span>
    17.     <span class="gongjvlan">种族span>
    18.     <span class="gongjvlan">降span>
    19.     <span class="gongjvlan">魔span>
    20.     <span class="gongjvlan">大span>
    21.     <span class="gongjvlan">圣span>
    22.     <span class="gongjvlan">,span>
    23.     <span class="gongjvlan">     span>
    24.     <span class="gongjvlan">护span>
    25.     <span class="gongjvlan">法span>
    26.     <span class="gongjvlan">夜span>
    27.     <span class="gongjvlan">叉span>
    28.     <span class="gongjvlan">听span>
    29.     <span class="gongjvlan">召span>
    30.     <span class="gongjvlan">而span>
    31.     <span class="gongjvlan">来span>
    32.     <span class="gongjvlan">！span>
    33.     <span class="gongjvlan">入span>
    34.     <span class="gongjvlan">阵。span>
    35.     <img src="折扇.png" style="width: 30px; height: 20px;text-align: center;position: relative;top: 5px;">
    36.  
    37.  
    38.  
    39. div>
    40. <div class="head">
    41.     <a href="http://localhost:63342/javaWeb001/%E6%B3%A8%E5%86%8C.html?_ijt=bd71lntimccg70qqm5ninu95lt"><img src="三足鼎.png" style="width: 50px; height: 50px;text-align: center;position: relative;left: 110px;top: 15px;">a>
    42.     <span class="head" style="position: absolute;left: 400px;line-height: 100px;">少年英雄    夜叉仙众    且听风吟    傩戏文化    人设生平        span>
    43.     <span><form action="" style="position: absolute;right: 100px;">
    44.         <input type="text" placeholder="请输入搜索内容" h><img src="搜索.png" style="width: 30px;height: 20px;text-align: center;position: relative;right: -2px;top: -2px;">form>span>
    46. div>
    47. <div class="paimian">
    48.     <div class="zhuti" style="display: inline-block;">
    49.         <div class="xx"><img src=" 箭头1.png " style="width: 25px; height: 25px;position:relative;left: 60px; ">div>
    50.  
    51.         <div class="xx "><img src="箭头1.png " style="width: 25px; height: 25px;position:relative;left: 60px; ">div>
    52.  
    53.         <div class="xx"><img src=" 箭头1.png " style="width: 25px; height: 25px;position:relative;left: 60px;">div>
    54.         <div class="xx"><img src=" 箭头1.png " style="width: 25px; height: 25px;position:relative;left: 60px; ">div>
    55.         <div class="xx "><img src="箭头1.png " style="width: 25px; height: 25px;position:relative;left: 60px;">div>
    56.  
    57.         <div class="xx"><img src=" 箭头1.png " style="width: 25px; height: 25px;position:relative;left: 60px;">div>
    58.  
    59.         <div class="xx "><img src="箭头1.png " style="width: 25px; height: 25px;position:relative;left: 60px;">div>
    60.  
    61.         <div class="xx"><img src=" 箭头1.png " style="width: 25px; height: 25px;position:relative;left: 60px;">div>
    62.  
    63.         <div class="xx"><img src=" 箭头1.png " style="width: 25px; height: 25px;position:relative;left: 60px;">div>
    64.  
    65.         <div class="xx"><img src=" 箭头1.png " style="width: 25px; height: 25px;position:relative;left: 60px;">div>
    66.  
    67.  
    68.  
    69.     div>
    70.  
    71.     <span class="slide" style="display: inline-block;">
    72.  
    73.             <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    74.   <ol class="carousel-indicators">
    75.     <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active">li>
    76.     <li data-target="#carouselExampleIndicators" data-slide-to="1">li>
    77.     <li data-target="#carouselExampleIndicators" data-slide-to="2">li>
    78.   ol>
    79.   <div class="carousel-inner">
    80.     <div class="carousel-item active">
    81.       <img src="111.png" class="d-block w-100" alt="..." >
    82.     div>
    83.     <div class="carousel-item">
    84.       <img src="1657612800381.jpeg" class="d-block w-100" alt="..." >
    85.     div>
    86.     <div class="carousel-item">
    87.       <img src="2643CAB1AB3F92913F54237612049B3D27672313.jpg" class="d-block w-100" alt="...">
    88.     div>
    89.   div>
    90.   <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
    91.     <span class="carousel-control-prev-icon" aria-hidden="true">span>
    92.         <span class="sr-only">Previousspan>
    93.         button>
    94.         <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
    95.     <span class="carousel-control-next-icon" aria-hidden="true">span>
    96.     <span class="sr-only">Nextspan>
    97.   button>
    98.     div>
    99.  
    100.  
    101.     span>
    102. div>
    103. div>
    104.  
    105.  
    106.  
    107.  
    108. <div class="diyikuan ">
    109.     <div class="yy">
    110.         <div class="diyi ">
    111.             <img src="青龙偃月刀.png " style="width: 50px; height: 50px; ">
    112.             <div>div>
    113.         div>
    114.         <div class="diyi "><img src="青龙偃月刀.png " style="width: 50px; height: 50px; ">
    115.             <div>div>
    116.         div>
    117.         <div class="diyi "><img src="青龙偃月刀.png " style="width: 50px; height: 50px; ">
    118.             <div>div>
    119.         div>
    120.  
    121.         <div class="diyi "><img src="方孔钱.png " style="width: 50px; height: 50px; ">
    122.             <div>div>
    123.         div>
    124.         <div class="diyi "><img src="方孔钱.png" style="width: 50px; height: 50px; ">
    125.             <div>div>
    126.         div>
    127.         <div class="diyi "><img src="方孔钱.png " style="width: 50px; height: 50px; ">
    128.             <div>div>
    129.         div>
    130.         <div class="diyi "><img src="三足鼎.png " style="width: 50px; height: 50px; ">
    131.             <div>div>
    132.  
    133.  
    134.     div>
    135.         <div class="diyi "><img src="三足鼎.png " style="width: 50px; height: 50px; ">
    136.             <div>div>
    137.  
    138.         div>
    139.         <div class="diyi "><img src="三足鼎.png " style="width: 50px; height: 50px; ">
    140.             <div>div>
    141.  
    142.  
    143.         div>
    144.     div>
    145. <div class="jj2">
    146.     <img src="1.jpg " width="425px" height="200px">
    147.     <img src="2.jpg " width="425px" height="200px">
    148.     <img src="3.jpeg " width="425px" height="200px">
    149. div>
    150.  
    151.  
    152. div>
    153. <div class="zhongxin ">
    154.     <div class="ww "><img src="折扇.png " style="width: 60px; height: 60px; ">
    155.     div>
    156.     <div class="ww "><img src="竹子.png " style="width: 60px; height: 60px; ">
    157.     div>
    158.     <div class="ww "><img src="古风物件，中国风，中国结.png " style="width: 60px; height: 60px; ">
    159.     div>
    160.     <div class="ww "><img src="古风伞.png " style="width: 60px; height: 60px; ">
    161.     div>
    162.     <div class="ww "><img src="竹简.png " style="width: 60px; height: 60px; ">
    163.     div>
    164. div>
    165.  
    166. <div class="jj1">
    167.     <img src="1.jpg" style="width: 100px; height: 72px;text-align: center;position: absolute;left: 10px;top: 5px; ">
    168.     <img src="2.jpg" style="width: 100px; height: 72px;text-align: center;position: absolute;left: 200px;top: 5px; ">
    169.     <img src="3.jpeg" style="width:100px; height: 72px;text-align: center;position: absolute;left: 390px;top: 5px; ">
    170.     <img src="4.jpeg" style="width: 100px; height: 72px;text-align: center;position: absolute;left: 580px;top: 5px; ">
    171.     <p>
    172.         <img src="5.jpeg" style="width: 100px; height: 72px;text-align: center;position: absolute;left: 10px;top: 80px; ">
    173.         <img src="6.jpeg" style="width: 100px; height: 72px;text-align: center;position: absolute;left: 200px;top: 80px; ">
    174.         <img src="魈哥.jpg" style="width: 100px; height: 72px;text-align: center;position: absolute;left: 390px;top: 80px; ">
    175.         <img src="8.jpg" style="width: 100px; height: 72px;text-align: center;position: absolute;left: 580px;top: 80px; ">
    176.     p>
    177. div>
    178. <div class="zhongxin1">
    179.     <div class="ww "><img src="方天画戟.png " style="width: 60px; height: 60px; ">
    180.     div>
    181.     <div class="ww "><img src="鼓.png " style="width: 60px; height: 60px; ">
    182.     div>
    183.     <div class="ww "><img src="中国风，埙.png " style="width: 60px; height: 60px; ">
    184.     div>
    185.     <div class="ww "><img src="方天画戟.png " style="width: 60px; height: 60px; ">
    186.     div>
    187.     <div class="ww "><img src="琵琶-01.png " style="width: 100px; height: 100px; ">
    188.     div>
    189. div>
    190. body>
    191. html>
    192.  
    1. #carouselExampleIndicators {
    2.     width: 1000px;
    3.     height: 900px;
    4.     float: left;
    5.     position: absolute;
    6.     left: 337px;
    7.     top: 130px;
    8. }
    9.  
    10. .gongjvlan {
    11.     width: 1500px;
    12.     height: 30px;
    13.     background: #05414f;
    14.     border: 1px solid #05414f;
    15.     line-height: 30px;
    16.     text-align: left;
    17.     font-size: 13px;
    18.     color: antiquewhite;
    19.     overflow: hidden;
    20. }
    21.  
    22. .head {
    23.     width: 1500px;
    24.     height: 100px;
    25.     float: left;
    26.     background: antiquewhite;
    27. }
    28.  
    29. .head1 {
    30.     width: 30px;
    31.     height: 20px;
    32.     text-align: center;
    33.     position: relative;
    34.     right: -2px;
    35.     top: -2px;
    36. }
    37.  
    38. .head1:hover {
    39.     opacity: 1;
    40. }
    41.  
    42. .zhuti {
    43.     width: 200px;
    44.     height: 700px;
    45.     background: #044758;
    46.     border: 10px solid #044758;
    47.     text-align: center;
    48.     font-size: 15px;
    49.     color: lightgoldenrodyellow;
    50.     float: left;
    51.     position: relative;
    52.     left: 110px;
    53. }
    54.  
    55. .paimian {
    56.     width: 1500px;
    57.     height: 700px;
    58.     float: left;
    59. }
    60.  
    61. .diyikuan {
    62.     width: 1500px;
    63.     height: 200px;
    64.     float: left;
    65.     position: absolute;
    66.     left: 110px;
    67.     top: 880px;
    68.     border: 1px solid bisque;
    69. }
    70.  
    71. .yy {
    72.     width: 210px;
    73.     height: 200px;
    74.     float: left;
    75.     background-color: cadetblue;
    76. }
    77.  
    78. .jj {
    79.     width: 1000px;
    80.     height: 200px;
    81.     opacity: 1;
    82.     position: absolute;
    83.     left: 337px;
    84.     top: 148px;
    85. }
    86.  
    87. .jj1 {
    88.     width: 1028px;
    89.     height: 200px;
    90.     position: absolute;
    91.     left: 190px;
    92.     top: -750px;
    93.     background: #faf7f1;
    94.     opacity: 0;
    95. }
    96. .jj2 {
    97.     width: 1290px;
    98.     height: 200px;
    99.     position: absolute;
    100.     left: 220px;
    101.     background: #faf7f1;
    102.     opacity: 1;
    103. }
    104. .diyikuan.jj2 img{
    105.     width: 100%;
    106.     height: 100%;
    107.     position: static;
    108.  
    109. }
    110.  
    111. .jj1:hover {
    112.     opacity: 1;
    113. }
    114.  
    115. .diyi {
    116.     width: 70px;
    117.     height: 70px;
    118.     float: left;
    119.     text-align: center;
    120.     font-size: 10px;
    121.     color: lightgoldenrodyellow;
    122. }
    123.  
    124. .zhongxin {
    125.     width: 100px;
    126.     height: 500px;
    127.     float: right;
    128.     border: 5px solid rgb(233, 232, 232);
    129.     position: fixed;
    130.     right: 50px;
    131.     top: 200px;
    132.     text-align: end;
    133.     background: rgb(233, 232, 232);
    134. }
    135.  
    136. .zhongxin1 {
    137.     width: 100px;
    138.     height: 500px;
    139.     float: right;
    140.     border: 5px solid rgb(233, 232, 232);
    141.     position: fixed;
    142.     right: 50px;
    143.     top: 200px;
    144.     text-align: end;
    145.     background: rgb(233, 232, 232);
    146.     opacity: 0;
    147.     color: seagreen;
    148. }
    149.  
    150. .zhongxin1:hover {
    151.     opacity: 1;
    152. }
    153.  
    154. .ww {
    155.     width: 100px;
    156.     height: 100px;
    157.     float: right;
    158.     text-align: center;
    159. }
    160.  
    161. .xx {
    162.     width: 160px;
    163.     height: 70px;
    164.     float: left;
    165.     text-align: left;
    166.     color: white;
    167.     font-size: 20px;
    168.     position: relative;
    169.     left: 10px;
    170.     border: 0px solid rgb(161, 159, 159);
    171.     line-height: 70px;
    172. }
    173.  
    174. .slide {
    175.     width: 800px;
    176.     height: 800px;
    177. }
    178. .carousel-inner{
    179.     width: 1350px;
    180.     height: 700px;
    181.     right: 15px;
    182. }
    183. .carousel-inner .carousel-item{
    184.     width: 100%;
    185.     height: 100%;
    186. }
    187. .carousel-inner .carousel-item img{
    188.     width: 100%;
    189.     height: 100%;
    190.     margin-top: 10px;
    191.  
    192. }

  • 相关阅读:
    选择排序（C++实现）
    c语言数据结构 二叉树（二）
    飞腾性能调优
    centos7搭建maven私服nexus
    彻底搞通服务发现的原理和实现
    docker容器服务器编排利器 Docker Compose应用实战
    LeetCode每日一题(963. Minimum Area Rectangle II)
    python牛客网刷题查漏补缺1
    分页查询和聚合查询
    [附源码]SSM计算机毕业设计餐厅卫生安全系统JAVA
  • 原文地址：https://blog.csdn.net/akisi/article/details/125902478