纯html和css构建的页面

最新推荐文章于 2023-12-05 16:25:09 发布
最新推荐文章于 2023-12-05 16:25:09 发布
阅读量170 收藏
点赞数
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57902652/article/details/130219288
版权

1、头部导航栏

/* #region顶部导航条开始 */
.topbar {
    height: 30px;
    background-color: #ECECEC;
}
.welcome {
    height: 30px;
    line-height: 30px;
    font-size: 0;
    color: #666;
}
.welcome span,.welcome a {
    font-size: 12px;
}
.welcome .hello{
    margin-right: 28px;
}
.welcome .login {
    padding-right: 10px;
    border-right: 1px solid #666;
}
.welcome .register {
    padding-left: 10px;
}
.topbar .list {
    height: 30px;
    line-height: 30px;
}
.topbar .list li {
    float: left;
}
.topbar .list li a {
    padding: 0 15px;
    border-right: 1px solid #666;
}
.topbar .list li:first-child a {
    padding-left: 0;
}
.topbar .list li:last-child a {
    padding-right: 0;
    border: 0;
}
/* #endregion顶部导航条结束 */

/* #region头部start */
.header {
    height: 120px;
    /* background-color: skyblue; */
}
.header .search form {
    margin-top: 42px;
    font-size: 0;
}
.header .search input {
    /* 给了边框width和height都要减少2px */
    width: 508px;
    height: 34px;
    border: 1px solid #DD302D;
}
.header .search button {
    width: 80px;
    height: 36px;
    background-color: #DD302D;
    vertical-align: top;
    background-image: url(../images/serch_icon.png);
    background-repeat: no-repeat;
    background-position: 28px 6px;
}
/* #endregion头部end */

2、主体部分

/* #region主导航start */
.main-nav {
    height: 48px;
    border-bottom: 1px solid #DD302D;
}
.main-nav .all-types {
    width: 190px;
    height: 48px;
    line-height: 48px;
    background-color: #DD302D;
    color: white;
    text-align: center;
    font-size: 16px;
}
.main-nav-list {
    height: 48px;
    line-height: 48px;
}
.main-nav-list li {
    float: left;
    margin: 0 10px;
    font-size: 16px;
}
/* #endregion主导航end */

/* #region头部start */
.main-content {
    margin-top: 10px;
}
.main-content .slide-nav {
    width: 190px;
    height: 458px;
    background-color: #F4F4F4;
    position: relative;
}
.main-content .slide-nav li {
    font-size: 14px;
    height: 28px;
    line-height: 28px;
    padding-left: 16px;
}
.main-content .slide-nav li:hover {
    background-color: #DD302D;
}
.main-content .slide-nav li:hover>a {
    color: #fff;
}
.second-menu {
    width: 680px;
    height: 458px;
    background-color:white;
    position: absolute;
    top: 0;
    left: 190px;
    padding-left: 20px;
    display: none;

}
.main-content .slide-nav li:hover .second-menu {
    display: block;
}
.second-menu dl {
    height: 36px;
    line-height: 36px;
}
.second-menu dt{
    width: 70px;
    float: left;
    font-weight: bold;
    margin-right: 10px;
}
.second-menu dl:first-child {
    margin-top: 10px;
}
.second-menu dd {
    float: left;
}
.second-menu dd a {
    padding: 0 10px;
    border-left: 1px solid #666;
}
.main-content .banner {
    width: 690px;
    height: 458px;
    background-color: green;
    margin: 0 10px;
}
.main-content .slide-other {
    width: 290px;
    height: 458px;
    /* background-color: orange; */
}
.main-content .message {
    width: 260px;
    height: 156px;
    border: 1px solid #D9D9D9 ;
    padding: 0 14px;
}
.main-content .message .title {
    height: 38px;
    line-height: 38px;
    border-bottom: 1px solid #D9D9D9;
}
.main-content .message .title span {
    font-size: 14px;
}
.main-content .message .title a {
    font-size: 12px;
}
.slide-other .msg-list li {
    height: 26px;
    line-height: 26px;
}
.slide-other .other-nav {
    margin-top: 10px;
    width: 290px;
    height: 290px;
    /* background-color: yellow; */
    overflow: hidden;
}

.other-nav li {
    width: 48px;
    height: 70px;
    /* background-color: turquoise; */
    float: left;
    margin: 0 11px;
    text-align: center;
    cursor: pointer;
}
.other-nav .other-nav-list:first-child {
    margin-top: 16px;
} 
.other-nav .other-nav-list:nth-child(2) {
    margin: 17px 0;
}
.other-nav li:first-child {
    margin-left: 16px;
}
.other-nav-list .picture {
    width: 48px;
    height: 48px;
    background-image: url(../images/精灵图-侧边功能.png);
}
.other-nav-list:nth-child(1) li:nth-child(1) .picture {
    background-position: 0 0;
}
.other-nav-list:nth-child(1) li:nth-child(2) .picture{
    background-position: -48px 0;
}
.other-nav-list:nth-child(1) li:nth-child(3) .picture{
    background-position: -96px 0;
}
.other-nav-list:nth-child(1) li:nth-child(2) .picture{
    background-position: -144px 0;
}
.other-nav-list:nth-child(2) li:nth-child(1) .picture {
    background-position: 0 -48px;
}
.other-nav-list:nth-child(2) li:nth-child(2) .picture {
    background-position: -48px -48px;
}
.other-nav-list:nth-child(2) li:nth-child(3) .picture {
    background-position: -96px -48px;
}
.other-nav-list:nth-child(2) li:nth-child(4) .picture {
    background-position: -144px -48px;
}
.other-nav-list:nth-child(3) li:nth-child(1) .picture {
    background-position: 0 -96px;
}
.other-nav-list:nth-child(3) li:nth-child(2) .picture {
    background-position: -48px -96px;
}
.other-nav-list:nth-child(3) li:nth-child(3) .picture {
    background-position: -96px -96px;
}
.other-nav-list:nth-child(3) li:nth-child(4) .picture {
    background-position: -144px -96px;
}
/* #endregion头部end*/

3、秒杀区域

/* #region秒杀区start*/
.seckill {
    margin-top: 10px;
}
.seckill img {
    float: left;
    margin-right: 11px;
    cursor: pointer;
}
.seckill img:last-child {
    margin-right: 0;
}
/* #endregion秒杀区end*/

4、家用电器

/* #region楼层区start*/
.floor {
    margin-top: 48px;
}
.floor-name {
    font-size: 20px;
}
.floor-nav {
    height: 30px;
    line-height: 30px;
    padding-bottom: 4px;
    border-bottom: 2px solid #DD302D;
}
.floor-nav-list li {
    float: left;
    font-size: 14px;
}
.floor-nav-list li a {
    padding: 0 10px;
    border-right: 1px solid #666;
}
.floor-nav-list li:first-child a {
    padding-left: 0;
}
.floor-nav-list li:last-child a {
    padding-right: 0;
    border: 0;
}
.floor-info .item {
    float: left;
}
.floor-info .item1 {
    width: 190px;
    height: 392px;
    background-color: #F4F4F4 ;
    padding: 20px;
}
.item1-list {
    margin-bottom: 29px;
}
.item1-list li {
    width: 90px;
    height: 22px;
    padding-bottom: 3.5px;
    border-bottom: 1px solid #D9D9D9 ;
    font-size: 16px;
    text-align: center;
}
.item1-list li:nth-child(2n-1) {
    float: left;
}
.item1-list li:nth-child(2n) {
    float: right;
}
.item1-list li:nth-child(3),
.item1-list li:nth-child(4) {
    margin: 14.4px 0;
}

.floor-info .item2 {
    width: 340px;
    height: 432px;
}
.floor-info .item3,
.floor-info .item4,
.floor-info .item5 {
    width: 206px;
    height: 432px;
}
.floor-info .item3 img,
.floor-info .item4 img,
.floor-info .item5 img {
    border-bottom: 1px solid #E2E2E2 ;
}
.floor-info .item3,
.floor-info .item4 {
    border-right: 1px solid #E2E2E2 ;
}

/* #endregion楼层区end*/

5、底部区域

/* #region页脚区start */
.footer {
    margin-top: 48px;
    height: 440px;
    background-color: #483E3E ;
}
.links-list {
    float: left;
    width: 190px;
    height: 176px;
    margin-top: 48px;
    margin-right: 10px;
}
.links-list:last-child {
    margin-right: 0px;
}
.links-list a {
    color: white;
    font-size: 14px;
}
.line {
    margin-top: 22px;
    height: 1px;
    background-color: #584D4D;
}
.bottom-links {
    text-align: center;
    margin-top: 47px;
}
.bottom-links-list {
    display: inline-block;
}

.bottom-links-list li {
    float: left;
}
.bottom-links-list li a {
    padding: 0 26px;
    border-right: 1px solid white;
    color: white;
}
.bottom-links-list li:first-child a {
    padding-left: 0;
}
.bottom-links-list li:last-child a {
    padding-right: 0;
    border: 0;
}
.copyright {
    margin-top: 10px;
    color: white;
}


/* #endregion页脚区end */

LZYXB
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML做一个简单漂亮的宠物网页（纯html代码）
qq_38512570的博客
05-08 296
🐕 宠物网页设计 、🐼保护动物网页、🐋鲸鱼海豚主题、🐘保护大象、等网站的设计与制作。🏷️HTML宠物网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的
HTML和CSS写的简易网页
qq_52006954的博客
03-14 1418
网页效果 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>假期项目</title> <style>h1{ font-size: 30px;}</style> <meta name="description" content="光山县第二高级中学分校（光山二高分.
纯HTML网页源码
11-02
纯HTML网页源码,本机直接运行，不错网页代码展示效果。
用html和css构建简单的静态网页
qq_47067103的博客
07-10 2604
只用html和css构建了静态网站，选择动漫海贼王为主题构建5个简单页面
花了3小时纯粹html+css做出的简单界面
m0_59953130的博客
09-28 296
话不多说，也没多大技术含量哈 上代码html部分 <!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-scal.
tribute-page:仅使用HTML和CSS构建致敬页面
05-27
仅使用HTML和CSS构建致敬页面。 确保页面符合UI设计的基本原则。 挑战性 确保图像与布局匹配可能是具有挑战性的。 为了确保将图像调整为适合屏幕布局，以下代码得到了利用 img { object-fit: cover; height: 500...
使用HTML5和CSS3构建基于webkit的Web-PageApp.doc
11-29
使用HTML5和CSS3构建基于webkit的Web-PageApp 在当今移动互联网时代，基于webkit的Web Page/App已经变得越来越流行，特别是在iOS和Android系统上。那么如何构建基于webkit的网站呢？本文将详细介绍如何使用HTML5和...
HTML+CSS+JS构建的电商网站页面（源码）
07-14
用HTML+CSS+JS构建的电商网站页面平台（完整代码），web前端CSS入门项目。简易读懂，适合学生以及课程报告参考用。
HTML+CSS实现动态背景登录页面
09-24
\n\n总之，通过HTML和CSS，我们可以构建一个动态背景的登录页面，不仅美观，还能提供良好的交互体验。动态背景的实现依赖于CSS3动画和背景属性，而登录表单的设计则需要关注用户体验和可用性。这样的页面不仅能够...
rabar:使用纯CSS构建的产品页面
03-05
rabar:使用纯CSS构建的产品页面
使用html+css实现一个静态页面（含源码）
STU网页设计
01-04 1566
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
纯HTML+CSS网页设计个人网站
01101
12-05 1266
首先，我们需要创建一个HTML文件，这个文件将包含我们网站的所有内容。接着，我们将创建一个主体，其中将包含个人的简介，经历，技能等内容。最后，我们将创建一个页脚，其中将包含联系信息和版权声明。在设计一个个人网站时，我们需要考虑的主要元素是布局，颜色，字体，图像和交互。我们将基于HTML和CSS创建一个简单的个人网站。然后，我们需要创建一个CSS文件，用来控制HTML元素的样式。以上代码将创建一个具有标题，导航菜单，关于部分，技能部分和联系信息的个人网站。
HTML+CSS写一个简单的网页界面
qq_47560372的博客
08-04 3328
学习了HTML和CSS入门的基本命令后，写出来一个简单的登录网页界面，可以跳转、登录。
纯 HTML+CSS 能写出什么惊人的效果？
祈澈菇凉
02-08 661
今天来分享一些只使用HTML和CSS实现的作品。不得不说，国外大佬用CSS画画还是非常强的！可以点击每个作品下方的链接查看对应的源代码~1. 利威尔本作品的作者是 Temani Afif，...
HTML/CSS 插件、工具和资料库都有哪些？推荐10个
网站运营
10-07 713
html css的编程最重要是多写，多看。写多了自然就会了。但是难免有的时候需要调试，以及掌握最新的技术。所以呢，我总结了十款html/css的插件和工具。具体如下： Brackets Brackets (括号) 是一个轻量而强大的工具， 它是一个新型的，开放源代码的文本编辑器，能理解网页设计。 MeasureIt MeasureIt 是一个为网页设计师和开发者提供的工
HTML+CSS制作的纯静态网页
热门推荐
One of thre_tigers的博客
01-13 2万+
刚学完HTML+CSS，一定要按照自己的想法去制作网页，虽然没有交互，但是可以对前面的知识有一个很大的重用，你的知识框架会更加完美。css基础html是勾勒，css是染色，基础的css学完你会有种想写页面的冲动，这时候你不用抑制住那种感觉，直接按照自己所想开写，这是你的第一个项目，从期末就一直想学Web前端设计，现在刚放假4天，自己也是真真正正的看了4天慕课，大体过了一遍HTML，CSS，我想我是...
HTML网站框架与组件库
吃不胖.
09-16 513
Bootstrap Bootstrap是一个免费、开源的前端框架，它使用HTML、CSS和Javascript等技术，可以用于响应式Web设计，自适应移动设备、平板电脑等设备，可以用于快速构建CSS、HTML及javascript等组件，如按钮、导航栏、表单、模态框等。Materialize Materialize是一种基于Google Material Design语言的响应式HTML、CSS和Javascript的前端框架，它提供了一套美观、简单的UI组件库，包括卡片、按钮、表单、图标、行动栏等。
分享四款导航页 个人主页html源码
dogeven的博客
07-17 4062
一、开源免费，可以展示很多社交账号，也可以更换社交账号图标指向你的网站，上传后即可使用。四、二次元风格，图片可以更改，这是我见过的最美的导航页之一。适合做成导航页面，更换图片和文字即可。二、开源免费，不过部署稍微麻烦点。
html主要区域,HTML5区域(Sectioning)的重要性
weixin_35050881的博客
06-21 249
不管你以前在web页面布局中如何称呼它们 - “区域”还是“块”，我们一直都在布局中将页面分成可视的不同区域。但真正的问题在于我们并没有使用任何正确的工具来实现。一般情况下我们使用典型的网格来划分页头，页面主题，页尾等等区域来实现所谓的页面布局。在过去的很多年以来，我们都使用DIV来帮助我们划分页面区域，而为此我们定义了很多class来帮助我们有效定义页面上的每一个层次，最新的HTML5最终帮助我...
html和css怎么弄唯品会注册页面
最新发布
12-22
首先，可以使用HTML标签来构建页面的整体结构，包括头部、导航栏、注册表单和底部等部分。可以通过、、、和等标签来创建这些区域，并使用ID和类来标识各个元素，方便后续的样式设置。 其次，我们需要使用CSS样式表...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值