简易网站布局（html代码）

最新推荐文章于 2024-05-24 12:54:49 发布
最新推荐文章于 2024-05-24 12:54:49 发布
阅读量839 收藏 6
点赞数 20
文章标签： html5 前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h131425q/article/details/138224970
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>学车在线首页</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <!-- 1.头部区域开始啦 -->

    <div class="header w">

        <!-- logo部分 -->

        <div class="logo">

            <img src="images/logo.png" alt="">

        </div>

        <!-- 导航栏部分 nav -->

        <div class="nav">

            <ul>

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

                <li><a href="#">课程</a></li>

                <li><a href="#">职业规划</a></li>

            </ul>

        </div>

        <!-- 搜索模块 -->

        <div class="search">

            <input type="text" value="输入关键词">

            <button></button>

        </div>

        <!-- 用户模块 -->

        <div class="user">

            <img src="images/user.png" alt="">

            qq-lilei

        </div>

    </div>

    <!-- 头部区域结束啦 -->

    <!-- 2. banner部分start -->

    <div class="banner">

        <!-- 版心 -->

        <div class="w">

            <div class="subnav">

                <ul>

                    <li><a href="#">前端开发 <span> > </span></a></li>

                    <li><a href="#">后端开发 <span> > </span> </a></li>

                    <li><a href="#">移动开发 <span> > </span> </a></li>

                    <li><a href="#">人工智能 <span> > </span> </a></li>

                    <li><a href="#">商业预测 <span> > </span> </a></li>

                    <li><a href="#">云计算与大数据 <span> > </span> </a></li>

                    <li><a href="#">运维 <span> > </span> </a></li>

                    <li><a href="#">ul设计 <span> > </span> </a></li>

                    <li><a href="#">产品 <span> > </span> </a></li>

                </ul>

            </div>

            <!-- course 课程表模块 -->

            <div class="course">

                <h2>我的课程表</h2>

                <div class="bd">

                    <ul>

                        <li>

                            <h4>继续学习 程序语言设计</h4>

                            <p>正在学习-使用对象</p>

                        </li>

                        <li>

                            <h4>继续学习 程序语言设计</h4>

                            <p>正在学习-使用对象</p>

                        </li>

                        <li>

                            <h4>继续学习 程序语言设计</h4>

                            <p>正在学习-使用对象</p>

                        </li>

                    </ul>

                    <a href="#" class="more">全部课程</a>

                </div>

            </div>

        </div>

    </div>

    <!-- banner部分end -->

    <!-- 3.精品推荐模块开始 -->

    <div class="goods w">

        <h3>精品推荐</h3>

        <ul>

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

            <li><a href="#">mysql</a></li>

            <li><a href="#">shell</a></li>

            <li><a href="#">java</a></li>

            <li><a href="#">python</a></li>

        </ul>

        <a href="#" class="mod">修改兴趣</a>

    </div>

    <!-- 精品推荐模块结束 -->

    <!-- 4. box核心内容区域开始 -->

    <div class="box w">

        <div class="box-hd">

            <h3>精品推荐</h3>

            <a href="#">查看全部</a>

        </div>

        <div class="box-bd">

            <ul class="clearfix">

                <li>

                    <img src="images/pic.png" alt="">

                    <h4>

                        Think PHP 5.0 博客系统实战项目演练

                    </h4>

                    <div class="info">

                        <span>高级</span> • 1125人在学习

                    </div>

                </li>

                <li>

                    <img src="images/pic.png" alt="">

                    <h4>

                        Think PHP 5.0 博客系统实战项目演练

                    </h4>

                    <div class="info">

                        <span>高级</span> • 1125人在学习

                    </div>

                </li>

                <li>

                    <img src="images/pic.png" alt="">

                    <h4>

                        Think PHP 5.0 博客系统实战项目演练

                    </h4>

                    <div class="info">

                        <span>高级</span> • 1125人在学习

                    </div>

                </li>

                <li>

                    <img src="images/pic.png" alt="">

                    <h4>

                        Think PHP 5.0 博客系统实战项目演练

                    </h4>

                    <div class="info">

                        <span>高级</span> • 1125人在学习

                    </div>

                </li>

                <li>

                    <img src="images/pic.png" alt="">

                    <h4>

                        Think PHP 5.0 博客系统实战项目演练

                    </h4>

                    <div class="info">

                        <span>高级</span> • 1125人在学习

                    </div>

                </li>

                <li>

                    <img src="images/pic.png" alt="">

                    <h4>

                        Think PHP 5.0 博客系统实战项目演练

                    </h4>

                    <div class="info">

                        <span>高级</span> • 1125人在学习

                    </div>

                </li>

                <li>

                    <img src="images/pic.png" alt="">

                    <h4>

                        Think PHP 5.0 博客系统实战项目演练

                    </h4>

                    <div class="info">

                        <span>高级</span> • 1125人在学习

                    </div>

                </li>

                <li>

                    <img src="images/pic.png" alt="">

                    <h4>

                        Think PHP 5.0 博客系统实战项目演练

                    </h4>

                    <div class="info">

                        <span>高级</span> • 1125人在学习

                    </div>

                </li>

                <li>

                    <img src="images/pic.png" alt="">

                    <h4>

                        Think PHP 5.0 博客系统实战项目演练

                    </h4>

                    <div class="info">

                        <span>高级</span> • 1125人在学习

                    </div>

                </li>

                <li>

                    <img src="images/pic.png" alt="">

                    <h4>

                        Think PHP 5.0 博客系统实战项目演练

                    </h4>

                    <div class="info">

                        <span>高级</span> • 1125人在学习

                    </div>

                </li>

            </ul>

        </div>

    </div>

    <!-- 4. box核心内容区域结束 -->

    <!-- 5. footer 模块制作 -->

    <div class="footer">

        <div class="w">

            <div class="copyright">

                <img src="images/logo.png" alt="">

                <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>

                    © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>

                <a href="#" class="app">下载APP</a>

            </div>

            <div class="links">

                <dl>

                    <dt>关于学成网</dt>

                    <dd><a href="#">关于</a></dd>

                    <dd><a href="#">管理团队</a></dd>

                    <dd><a href="#">工作机会</a></dd>

                    <dd><a href="#">客户服务</a></dd>

                    <dd><a href="#">帮助</a></dd>

                </dl>

                <dl>

                    <dt>关于学成网</dt>

                    <dd><a href="#">关于</a></dd>

                    <dd><a href="#">管理团队</a></dd>

                    <dd><a href="#">工作机会</a></dd>

                    <dd><a href="#">客户服务</a></dd>

                    <dd><a href="#">帮助</a></dd>

                </dl>

                <dl>

                    <dt>关于学成网</dt>

                    <dd><a href="#">关于</a></dd>

                    <dd><a href="#">管理团队</a></dd>

                    <dd><a href="#">工作机会</a></dd>

                    <dd><a href="#">客户服务</a></dd>

                    <dd><a href="#">帮助</a></dd>

                </dl>

            </div>

        </div>

    </div>

</body>

</html>

程序猫..
关注
  • 20
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML基础网页布局代码写法
m0_51826406的博客
03-07 8713
W3C标准 W3C World Wide Web Consortium 万维网联盟 中立性技术标准机构 W3C标准包括 结构化标准语言（HTML XML） 表现标准语言（CSS） 行为标准（DOM ECMAScript） 在idea创建一个工程 开始学习HTML基础 <!--注释 DOCTYPE：告诉浏览器我们使用什么规范 --> <!DOCTYPE html> <html lang="en"> <!-- head代表网页头部 --> <hea
web页面制作
qq_61986054的博客
11-26 562
【代码】web页面制作。
网页常见布局案例解析+代码
weixin_55932637的博客
11-25 1153
前端常见页面案例，布局解析+代码
原 ！神静态网页布局详解，html+css布局实战，附详细代码
qq_60614034的博客
10-04 9784
国庆七天，悄悄练一手，回到学校耍耍酷，或者在女朋友面前露两手。让对象不仅爱原神，更爱你！同时附上详细代码以及图片素材。
学生网页设计作业源码(HTML+CSS)——海贼王6页代码质量好
最新发布
有问必答，欢迎打扰，项目开发，网页设计
05-24 499
1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。
web网页设计与制作-html+css+js实现企业官网展示
mon_star°的博客
03-13 2854
web网页设计与制作-html+css+js实现企业官网展示主要使用原生HTML、CSS、JavaScript编写的一个静态企业官网展示类型的网站。文件目录assets：静态资源目录；favicon.ico：网站图标；index.html：首页html；assets静态资源目录下有css、fonts、images、js等资源目录；界面效果可商用，可非商用，期末HTML大作业、课设、毕设等。
2021-05-18
weixin_46076864的博客
05-19 170
改变层级关系：z-index：正数，负数也可以，值越大，越在上面显示，默认值：auto（等效于0） 1.z-index只能在定位使用（relative absolute fixed) 2.z-index取整数 锚点： 1.a href=“跳转元素对应的id(#idname)” 2.<标签名 id=“idname”> 行内元素直接设置大小的方式：（转换元素类型和脱离文档流） 1.display:block/inline-block; 2.float:left/right; 3.position:
HTML简易计算器源代码.zip
05-22
HTML代码中包含了按钮、输入框等元素，这些元素通过class属性和id属性进行标识，以便在JavaScript中进行操作。例如，每个数字按钮可能都有一个对应的"data-value"属性，用于存储按钮代表的数值，而运算符按钮则有...
html 简易心动代码 直接使用即可
08-17
在这个"html 简易心动代码 直接使用即可"的主题中，我们可以探讨HTML的基本结构、元素、以及如何创建一个具有心跳效果的网页。 首先，让我们了解HTML的基本结构。一个基本的HTML文件由两部分组成：头部（head）和...
简易京东网页HTML代码（HTML&JS;）
01-02
在本项目中，"简易京东网页HTML代码"是一个HTML课程设计，目的是让学生了解并实践HTML和JavaScript的基础知识，以及如何构建一个模拟京东购物网站的页面。这个设计将涵盖网页的基本结构，布局，链接，以及可能涉及到...
简易后台网站管理系统页面html静态模板
12-04
【简易后台网站管理系统页面html静态模板】是一种用于构建后台管理界面的设计框架，它包含了多个预设计的HTML页面，便于开发者快速搭建和定制管理系统的前端部分。这个模板的主要目标是简化开发流程，提供一种直观且...
40种网页布局源代码
06-12
收集的40个CSS网页布局源代码，对CSS入门网页布局有很大帮助！
HTML页面布局
12-14
HTML的基本布局，主要是导航的基本代码， 商城首页 淡斑 祛痘 去黑头 去黄 祛皱 微针 今天特惠
页面框架div+css代码
12-23
关于div+css布局的网页框架源代码，希望对大家有所帮助
基于html+css+js实现简易计算器代码实例
10-15
这里的HTML代码创建了一个包含输入框（用于显示计算结果）和一系列按钮（数字与运算符）的页面布局。`<link>`标签引入了外部CSS文件，而`<script>`标签引入了JavaScript文件，这两个文件分别负责样式和交互逻辑。 ...
100套html5网页静态模板 /个人主页网站html模板/Bootstrap扁平化网站源码（公开分享）
hmz360的博客
12-26 8388
HTML5页面模板的优势HTML5是一种标记语言，用于构建和设计网站和应用程序的界面。它与CSS和JavaScript一起使用，以提供丰富和交互式的用户界面。使用HTML5页面模板对于开发人员和设计师来说有很多优势。这里分享100套html5网页静态模板，也有个人主页网站html模板，它是Bootstrap扁平化网站源码。分有不同行业。html5网页静态模板合集密码：A688。
DIV+CSS网页布局（新手必备)
热门推荐
Darlingmi的博客
04-20 3万+
文章目录一：网页布局的目的二：如何布局（1）：确定“版心”（2）：分析模块三：页面元素的定位机制（1）流式布局（2）浮动-float（3）绝对定位(position:absolute)(4)相对定位(position:relative)四：布局中的常用属性(1)浮动属性(float)(2)清除属性(clear)(3)溢出属性(overflow)五：元素的定位六：偏移量七：层叠属性八：语义标签九：命名规范 一：网页布局的目的 通过网页布局，可以使网页的内容更加清晰，有条理，同时更加易读。 二：如何布局 （1）
【HTML网页设计 + CSS样式表】详细记录 / 含代码 by.Akaxi
Akaxi的博客
10-12 6139
【HTML网页设计 + CSS样式表】详细记录 / 含代码
利用CSS+DIV进行网页布局
F2022697486的博客
03-25 1万+
网页布局是网页设计开发工作的重要组成部分，通过合理的网页布局能够实现网页页功能的精准定位，增强网页展示效果，使用户能够在较短的时间内找到目标元素。此外，合理的功能布局、图像搭配可以增强网页视觉表现力，给用户带来强烈的视觉感受，DIV+CSS布局技术可以让用户像编辑Word文档一样调整网页中的元素，同时还可以精准定位网页中的位置，不但降低了网页维护的难度，而且还提高了网页在服务器中的下载速率及其在网络中的传输速率。
生成一个简易的网站购物商城的html5代码
05-27
下面是一个简单的网站购物商城的HTML5代码： ```html <!DOCTYPE html> <html lang="en"> <title>My Shopping Mall <h1>My Shopping Mall <li><a href="#">Home</a></li> <li><a href="#">Products...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值