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

最新推荐文章于 2024-04-30 16:59:14 发布
最新推荐文章于 2024-04-30 16:59:14 发布
阅读量1.7k 收藏 26
点赞数 3
分类专栏： 前端 文章标签： html css servlet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/akisi/article/details/125902478
版权

html常用的标签属性：

* 注释：<!-- 注释内容 -->
        * <h1> to <h6>：标题标签
            * h1~h6:字体大小逐渐递减
        * <p>：段落标签
        * <br>：换行标签
        * <hr>：展示一条水平线
            * 属性：
                * color：颜色
                * width：宽度
                * size：高度
                * align：对其方式
                    * center：居中
                    * left：左对齐
                    * right：右对齐
        * <b>：字体加粗
        * <i>：字体斜体
        * <font>:字体标签
        * <center>:文本居中
            * 属性：
                * 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：在空白页面打开

<a href="http网址">文字</a>

表格标签：


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

实战练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>魈魈快乐窝</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    <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>
    <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>
    <link rel="stylesheet" href="./style001.css">
</head>
<body>
<div class="gongjvlan">
    <span class="gongjvlan">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <span class="gongjvlan">所属国家-璃月</span>
    <span class="gongjvlan">种族</span>
    <span class="gongjvlan">降</span>
    <span class="gongjvlan">魔</span>
    <span class="gongjvlan">大</span>
    <span class="gongjvlan">圣</span>
    <span class="gongjvlan">,</span>
    <span class="gongjvlan"> &nbsp;&nbsp;&nbsp;&nbsp;</span>
    <span class="gongjvlan">护</span>
    <span class="gongjvlan">法</span>
    <span class="gongjvlan">夜</span>
    <span class="gongjvlan">叉</span>
    <span class="gongjvlan">听</span>
    <span class="gongjvlan">召</span>
    <span class="gongjvlan">而</span>
    <span class="gongjvlan">来</span>
    <span class="gongjvlan">！</span>
    <span class="gongjvlan">入</span>
    <span class="gongjvlan">阵。</span>
    <img src="折扇.png" style="width: 30px; height: 20px;text-align: center;position: relative;top: 5px;">



</div>
<div class="head">
    <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>
    <span class="head" style="position: absolute;left: 400px;line-height: 100px;">少年英雄&nbsp;&nbsp;&nbsp;&nbsp;夜叉仙众&nbsp;&nbsp;&nbsp;&nbsp;且听风吟&nbsp;&nbsp;&nbsp;&nbsp;傩戏文化&nbsp;&nbsp;&nbsp;&nbsp;人设生平&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</span>
    <span><form action="" style="position: absolute;right: 100px;">
        <input type="text" placeholder="请输入搜索内容" h><img src="搜索.png" style="width: 30px;height: 20px;text-align: center;position: relative;right: -2px;top: -2px;"></form></span>
<!--    <span class="head1"><img src="搜索.png" style="width: 40px;height: 40px;text-align: center;position: relative;right: -1px;top: 0px;"></span>-->
</div>
<div class="paimian">
    <div class="zhuti" style="display: inline-block;">
        <div class="xx"><img src=" 箭头1.png " style="width: 25px; height: 25px;position:relative;left: 60px; "></div>

        <div class="xx "><img src="箭头1.png " style="width: 25px; height: 25px;position:relative;left: 60px; "></div>

        <div class="xx"><img src=" 箭头1.png " style="width: 25px; height: 25px;position:relative;left: 60px;"></div>
        <div class="xx"><img src=" 箭头1.png " style="width: 25px; height: 25px;position:relative;left: 60px; "></div>
        <div class="xx "><img src="箭头1.png " style="width: 25px; height: 25px;position:relative;left: 60px;"></div>

        <div class="xx"><img src=" 箭头1.png " style="width: 25px; height: 25px;position:relative;left: 60px;"></div>

        <div class="xx "><img src="箭头1.png " style="width: 25px; height: 25px;position:relative;left: 60px;"></div>

        <div class="xx"><img src=" 箭头1.png " style="width: 25px; height: 25px;position:relative;left: 60px;"></div>

        <div class="xx"><img src=" 箭头1.png " style="width: 25px; height: 25px;position:relative;left: 60px;"></div>

        <div class="xx"><img src=" 箭头1.png " style="width: 25px; height: 25px;position:relative;left: 60px;"></div>



    </div>

    <span class="slide" style="display: inline-block;">

            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="111.png" class="d-block w-100" alt="..." >
    </div>
    <div class="carousel-item">
      <img src="1657612800381.jpeg" class="d-block w-100" alt="..." >
    </div>
    <div class="carousel-item">
      <img src="2643CAB1AB3F92913F54237612049B3D27672313.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
    </div>


    </span>
</div>
</div>




<div class="diyikuan ">
    <div class="yy">
        <div class="diyi ">
            <img src="青龙偃月刀.png " style="width: 50px; height: 50px; ">
            <div></div>
        </div>
        <div class="diyi "><img src="青龙偃月刀.png " style="width: 50px; height: 50px; ">
            <div></div>
        </div>
        <div class="diyi "><img src="青龙偃月刀.png " style="width: 50px; height: 50px; ">
            <div></div>
        </div>

        <div class="diyi "><img src="方孔钱.png " style="width: 50px; height: 50px; ">
            <div></div>
        </div>
        <div class="diyi "><img src="方孔钱.png" style="width: 50px; height: 50px; ">
            <div></div>
        </div>
        <div class="diyi "><img src="方孔钱.png " style="width: 50px; height: 50px; ">
            <div></div>
        </div>
        <div class="diyi "><img src="三足鼎.png " style="width: 50px; height: 50px; ">
            <div></div>


    </div>
        <div class="diyi "><img src="三足鼎.png " style="width: 50px; height: 50px; ">
            <div></div>

        </div>
        <div class="diyi "><img src="三足鼎.png " style="width: 50px; height: 50px; ">
            <div></div>


        </div>
    </div>
<div class="jj2">
    <img src="1.jpg " width="425px" height="200px">
    <img src="2.jpg " width="425px" height="200px">
    <img src="3.jpeg " width="425px" height="200px">
</div>


</div>
<div class="zhongxin ">
    <div class="ww "><img src="折扇.png " style="width: 60px; height: 60px; ">
    </div>
    <div class="ww "><img src="竹子.png " style="width: 60px; height: 60px; ">
    </div>
    <div class="ww "><img src="古风物件，中国风，中国结.png " style="width: 60px; height: 60px; ">
    </div>
    <div class="ww "><img src="古风伞.png " style="width: 60px; height: 60px; ">
    </div>
    <div class="ww "><img src="竹简.png " style="width: 60px; height: 60px; ">
    </div>
</div>

<div class="jj1">
    <img src="1.jpg" style="width: 100px; height: 72px;text-align: center;position: absolute;left: 10px;top: 5px; ">
    <img src="2.jpg" style="width: 100px; height: 72px;text-align: center;position: absolute;left: 200px;top: 5px; ">
    <img src="3.jpeg" style="width:100px; height: 72px;text-align: center;position: absolute;left: 390px;top: 5px; ">
    <img src="4.jpeg" style="width: 100px; height: 72px;text-align: center;position: absolute;left: 580px;top: 5px; ">
    <p>
        <img src="5.jpeg" style="width: 100px; height: 72px;text-align: center;position: absolute;left: 10px;top: 80px; ">
        <img src="6.jpeg" style="width: 100px; height: 72px;text-align: center;position: absolute;left: 200px;top: 80px; ">
        <img src="魈哥.jpg" style="width: 100px; height: 72px;text-align: center;position: absolute;left: 390px;top: 80px; ">
        <img src="8.jpg" style="width: 100px; height: 72px;text-align: center;position: absolute;left: 580px;top: 80px; ">
    </p>
</div>
<div class="zhongxin1">
    <div class="ww "><img src="方天画戟.png " style="width: 60px; height: 60px; ">
    </div>
    <div class="ww "><img src="鼓.png " style="width: 60px; height: 60px; ">
    </div>
    <div class="ww "><img src="中国风，埙.png " style="width: 60px; height: 60px; ">
    </div>
    <div class="ww "><img src="方天画戟.png " style="width: 60px; height: 60px; ">
    </div>
    <div class="ww "><img src="琵琶-01.png " style="width: 100px; height: 100px; ">
    </div>
</div>
</body>
</html>


#carouselExampleIndicators {
    width: 1000px;
    height: 900px;
    float: left;
    position: absolute;
    left: 337px;
    top: 130px;
}

.gongjvlan {
    width: 1500px;
    height: 30px;
    background: #05414f;
    border: 1px solid #05414f;
    line-height: 30px;
    text-align: left;
    font-size: 13px;
    color: antiquewhite;
    overflow: hidden;
}

.head {
    width: 1500px;
    height: 100px;
    float: left;
    background: antiquewhite;
}

.head1 {
    width: 30px;
    height: 20px;
    text-align: center;
    position: relative;
    right: -2px;
    top: -2px;
}

.head1:hover {
    opacity: 1;
}

.zhuti {
    width: 200px;
    height: 700px;
    background: #044758;
    border: 10px solid #044758;
    text-align: center;
    font-size: 15px;
    color: lightgoldenrodyellow;
    float: left;
    position: relative;
    left: 110px;
}

.paimian {
    width: 1500px;
    height: 700px;
    float: left;
}

.diyikuan {
    width: 1500px;
    height: 200px;
    float: left;
    position: absolute;
    left: 110px;
    top: 880px;
    border: 1px solid bisque;
}

.yy {
    width: 210px;
    height: 200px;
    float: left;
    background-color: cadetblue;
}

.jj {
    width: 1000px;
    height: 200px;
    opacity: 1;
    position: absolute;
    left: 337px;
    top: 148px;
}

.jj1 {
    width: 1028px;
    height: 200px;
    position: absolute;
    left: 190px;
    top: -750px;
    background: #faf7f1;
    opacity: 0;
}
.jj2 {
    width: 1290px;
    height: 200px;
    position: absolute;
    left: 220px;
    background: #faf7f1;
    opacity: 1;
}
.diyikuan.jj2 img{
    width: 100%;
    height: 100%;
    position: static;

}

.jj1:hover {
    opacity: 1;
}

.diyi {
    width: 70px;
    height: 70px;
    float: left;
    text-align: center;
    font-size: 10px;
    color: lightgoldenrodyellow;
}

.zhongxin {
    width: 100px;
    height: 500px;
    float: right;
    border: 5px solid rgb(233, 232, 232);
    position: fixed;
    right: 50px;
    top: 200px;
    text-align: end;
    background: rgb(233, 232, 232);
}

.zhongxin1 {
    width: 100px;
    height: 500px;
    float: right;
    border: 5px solid rgb(233, 232, 232);
    position: fixed;
    right: 50px;
    top: 200px;
    text-align: end;
    background: rgb(233, 232, 232);
    opacity: 0;
    color: seagreen;
}

.zhongxin1:hover {
    opacity: 1;
}

.ww {
    width: 100px;
    height: 100px;
    float: right;
    text-align: center;
}

.xx {
    width: 160px;
    height: 70px;
    float: left;
    text-align: left;
    color: white;
    font-size: 20px;
    position: relative;
    left: 10px;
    border: 0px solid rgb(161, 159, 159);
    line-height: 70px;
}

.slide {
    width: 800px;
    height: 800px;
}
.carousel-inner{
    width: 1350px;
    height: 700px;
    right: 15px;
}
.carousel-inner .carousel-item{
    width: 100%;
    height: 100%;
}
.carousel-inner .carousel-item img{
    width: 100%;
    height: 100%;
    margin-top: 10px;

}

今夜鸣风
关注
  • 3
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
大一期末毕业答辩 漫威静态网页设计 HTML+CSS
06-22
大一期末毕业答辩 漫威静态网页设计 HTML+CSS 一个大一结束制作的漫威静态网页答辩用的，有很多可以改进的地方，但是整体来看非常整洁漂亮，需要的可以拿来用。大一期末毕业答辩 漫威静态网页设计
HTML 古风网
12-25
HTML 古风网 编程
HTML静态网页的设计
07-23
设计的部分效果：https://link2points.blog.csdn.net/article/details/108247231 其它效果：多页面持续背景音，css动画等等
课程作业基于CSS+HTML的个人静态网页源码.zip
10-12
【资源说明】 课程作业基于CSS+HTML的个人静态网页源码.zip课程作业基于CSS+HTML的个人静态网页源码.zip课程作业基于CSS+HTML的个人静态网页源码.zip课程作业基于CSS+HTML的个人静态网页源码.zip课程作业基于CSS+HTML的个人静态网页源码.zip课程作业基于CSS+HTML的个人静态网页源码.zip课程作业基于CSS+HTML的个人静态网页源码.zip课程作业基于CSS+HTML的个人静态网页源码.zip课程作业基于CSS+HTML的个人静态网页源码.zip 【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可直接用于毕设、课设、作业等。 欢迎下载，沟通交流，互相学习，共同进步！
大学生网页制作之美食篇html+css静态网页设计
06-14
本设计利用了js+css+html 自己手写，代码简单，交作业没问题
HTML简单静态页面的编写
GAVINVSwithCAILE的博客
07-30 2773
HBuilder X来编写一个简单的前端静态页面 HTML简单静态页面的编写
html古风颜色代码,数字报纸HTML版本
weixin_34340606的博客
06-09 253
走到国外，都能在中国人居住处看到关老爷的像儿；说起兄弟，无人不遥想“桃园三结义”……如今人人都爱说《三国》，不仅是这部电视剧引发的效应，更是三国历史本身的深远影响。在《三国》已经亮相的内容中，风云簿上有赞有弹，评的都是我们耳熟能详的桥段。赞一个千里走单骑有情有义有杀气关羽挂印而去之前对着大印行了个礼，而曹操以鹿肉、好酒款待，并跪下给关公系鞋带，远送关羽离去后颓然坐下。关羽的一份兄弟义气，曹操的一...
HTML5期末大作业：文化网站设计——古典中国风工艺美术网页设计(9页) HTML+CSS+JavaScript...
qq_365392777
09-29 1030
常见网页设计作业题材有 ​​个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他​​ 等网页设计题目, ​​A...
HTML网页设计作业：文化网站设计——基于HTML古典中国风工艺美术网页设计(9页)
qq_38514094的博客
03-23 179
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒
HTML5期末大作业：动漫网页主题设计——卡通漫画教育首页HTML+CSS+JavaScript 动漫网页HTML代码 学生网页课程设计期末作业下载 动漫大学生网页设计制作成
热门推荐
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-13 1万+
HTML5期末大作业：动漫网页主题设计——卡通漫画教育首页HTML+CSS+JavaScript 动漫网页HTML代码 学生网页课程设计期末作业下载 动漫大学生网页设计制作成 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品
静态网页设计期末课程设计HTML5+css3(初级)
03-09
资源名称:静态网页设计期末课程设计 使用/学习目标：完成期末课设 应用场景：HTM+css相互结合，完美搭建一个静态的网页 特点：使用简单 适用人群：学习静态网页之后的初学者 使用/学习说明：在学习的过程中要结合HTML框架和css，优化网页，使得网页更加美化
制作一个简单HTML电影网页设计（HTML+CSS）
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
制作一个简单HTML静态网页（HTML+CSS）
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
设计一个简单HTML爵士音乐网页（HTML+CSS）
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生网页作业，div css js 等通过dreamwear的工具实现规范化，比如文件夹的规范，代码写作的规范，...
【网页设计作业】个人简历网页模板，布局左右结构，风格清新，使用html+css的纯静态网页，支持部署和使用！
12-27
【网页设计作业】个人简历网页模板，布局左右结构，风格清新，使用html+css的纯静态网页，支持部署和使用！响应式布局，支持移动端正常显示。
这是一个简单的照明材料网站，后续还会更新
m0_64180190的博客
04-29 2171
产品中心|联系方式|新闻动态网页首页|产品中心|联系方式|新闻动态
高德地图+HTML+点击事件+自定心信息窗体
最新发布
pursue.dreams的博客
04-30 461
【代码】高德地图+HTML+点击事件+自定心信息窗体。
用html画一个四叶草
liulang68的博客
04-20 2035
以上是部分代码，需要请看主页加联系方式。
html和css静态网页布局设计
03-09
HTML 和 CSS 是用于网页设计的两种语言，HTML 用于定义网页的结构和内容，CSS 用于定义网页的样式和布局。在静态网页布局设计中，我们可以使用 CSS 的盒模型来控制元素的大小、位置和间距，也可以使用 CSS 的浮动和...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值