【期末小作业】HTML、CSS前端静态网页

最新推荐文章于 2024-04-24 21:53:34 发布
最新推荐文章于 2024-04-24 21:53:34 发布
阅读量662 收藏 4
点赞数
分类专栏： 前端 文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wodegecsdn/article/details/129532252
版权

分享一个可以“趁别人喝咖啡的功夫“”写的一个静态网页，纯纯练手小项目，适合前端刚入门的小白练练手。

@前端练手静态页面

实现效果图展示

CSS代码

HTML 代码

环境：VScode编辑器

语言：HTML 、CSS
在这里插入图片描述

一、实现效果图

仅仅通过html、CSS最简单的一些代码基础就可以实现，是一个静态的网页，没有很复杂。涉及到的一些基础知识如下：

1- px像素、颜色；2-开发环境搭建、vscode配置；3-网页的基本结构；4-CSS常用样式基础；5-html常用标签；6-布局常用的css样式基础；7-盒模型基础；8-浮动原理；9-列表标签；10-字体样式、文本样式11-伪类、组合选择器、伪元素；12-CSS继承；13-图文混排；14-背景样式；15-文本格式化、特殊标签、锚点、字体图标；等。

在这里插入图片描述

完整代码文件及图片获取
搜索公粽号＠李桥桉，回复【家居网首页①】即可ｇｅｔ．

二、CSS代码如下

.header{
    /* background-color: pink; */
    height: 140px;
}
.main{
    /* background-color: aquamarine; */
    height: 2130px;
}
.footer{
    /* background-color: tomato; */
    height: 200px;
}
.header .h-logo{
    height: 100px;
    /* background-color: bisque; */
}
.header .h-logo .h-l-content{
    width: 1126px;
    height: 100%;
    /* background-color: rgb(246, 250, 144); */
    margin: 0 auto;
    /* 设置一个属性，来解决传递过来的margin */
    overflow: hidden;
}
.header .h-logo .h-l-content .logo-box{
    width: 173px;
    height: 60px;
    margin-top: 20px;
    float: left;
}
.header .h-logo .h-l-content .logo-box img{
    height: 60px;
    width: 100%;
}
.header .h-logo .h-l-content .search-box{
    width: 341px;
    height: 25px;
    /* background-color: rgb(58, 159, 248); */
    float: right;
    margin-top: 37.5px;
}
.header .h-logo .h-l-content .search-box .s-login{
    width: 80px;
    height: 100%;
    /* background-color: pink; */
    float: left;
}
.header .h-logo .h-l-content .search-box .s-login a{
    float: left;
    color: #000000;
    font-size: 13px;
    text-decoration: none;
    line-height: 25px;
}
.header .h-logo .h-l-content .search-box .s-login a:last-child{
    float: right;
}
.header .h-logo .h-l-content .search-box .s-login span{
    float: left;
    margin-left: 12px;
    color: #dbdbdb;
}

.header .h-logo .h-l-content .search-box .s-input{
    width: 160px;
    height: 100%;
    /* background-color: tomato; */
    float: left;
    margin-left: 20px;
    border-bottom: 1px solid #000;
}
.header .h-logo .h-l-content .search-box .s-input img{
    width: 20px;
    vertical-align: middle;
}

.header .h-logo .h-l-content .search-box .s-input input{
    width: 130px;
    vertical-align: middle;
    border: none;
    outline: none;
}


.header .h-logo .h-l-content .search-box .s-icon{
    width: 60px;
    height: 100%;
    /* background-color: red; */
    float: right;
}
.header .h-logo .h-l-content .search-box .s-icon a{
    float: left;
    margin-top: 2px;
}
.header .h-logo .h-l-content .search-box .s-icon a:last-child{
    float: right;
}

.header .h-nav{
    height: 40px;
    /* background-color: #85daf6; */
    overflow: hidden;
}
.header .h-nav .h-menu{
    width: 605px;
    height: 15px;
    /* background-color: rgb(117, 117, 251); */
    margin: 12.5px auto;
    overflow: hidden;
    flex-wrap: nowrap; 

}

.header .h-nav .h-menu  a{
    float: left; 
    padding: 0 19px;
    font-size: 13px;
    color: #333333;
    text-decoration: none;
    height: 13px;
    font-family: MicrosoftYaHei;
    font-weight: normal; 
    font-stretch: normal;
    line-height: 15px;
    color: #333333;

    /* display: flex;
    flex-wrap: wrap;
    justify-content: space-between;  */
}

.header .h-nav .h-menu  a:hover{
    color: #000;
}

.main .m-banner{
    height: 666px;
    background-color: rgb(140, 236, 122);
}
.main .m-banner .m-box{
    height: 666px;
}
.main .m-banner .m-picture img{
    width: 100%;
    height: 666px;
    margin: 0 auto;
}

.main .m-entry{
    width: 840px;
    height: 380px;
    background-color: rgb(255, 255, 255);
    margin: 0 auto;
    margin-top: -50px;

    position: relative;
    z-index: 9;
}
.main .m-entry .m-entry-box{
    width: 260px;
    height: 350px;
    background-color: rgb(216, 241, 143);
    float: left;
    margin-left: 15px;
    margin-top: 15px;

}
.main .m-goods{
    width: 1126px;
    height: 1070px;
    /* background-color: tomato; */
    margin: 0 auto;
    margin-top: 30px;
}
.main .main-goods .m-g-title{
    width: 811px;
    margin: 0 auto;
}
.main .m-goods .m-g-title img{
    width: 100%;
    display: block;

}
.main .m-goods .m-g-content{
    height: 1005px;
    width: 100%;
    height: 1005px;
    margin-top: 30px;
    /* background-color: rgb(226, 246, 136); */

}
.main .m-goods .m-g-content .c-row {
    width: 1126px;
    height: 335px;
}
.main .m-goods .m-g-content .content-box{
    width: 268px;
    height: 268px;
    /* background-color: rgb(245, 137, 216); */
    
    /* display: flex;
    flex-wrap: wrap;
    justify-content: space-between;  */

    float: left;

    /* 通过给卡片两边同时设置margin来调整之间的间距问题 */
    margin: 0  6px;
    margin-bottom: 60px;
 

    /* 同时作用给span标签和p标签里的文字 */
    text-align: center;

}
.content-box p{
    font-size: 12px;
    /* text-align: center; */
    margin-bottom: 5px;
}
.content-box span{
    font-size: 14px;
    color: #a10000;
}
.main .m-goods .m-g-content .content-box img{
    width: 100%;
    display: block;
}

.footer{
    height: 200px;
    /* background-color: tomato; */
}
.footer .f-top{
    height: 113px;
    /* background-color: aliceblue; */
    overflow: hidden;
    border-top: 1px solid #ccc;
    margin-top: 30px;
}
.footer .f-top .f-t-box{
    width: 1120px;
    height: 53px;
    /* background-color: rgb(30, 160, 160); */
    margin: 0 auto;
    margin-top: 30px;
}
.footer .f-top .f-t-box .f-t-content{
    width: 279px;
    height: 100%;
    /* background-color: chocolate; */
    /* background-color: #eee; */
    text-align:center;
    float: left;
    border-right:1px solid #ccc
    
}
.footer .f-top .f-t-box .f-t-content img{
    /* 调整图片的基线 */
    vertical-align: middle;
    
}
.footer .f-top .f-t-box .f-t-content span{
    /* 调整文字的基线 */
    vertical-align: middle;
    
}
.footer .f-top .f-t-box .f-t-content-n-border{
    width: 280px;
    border: none;
}
.footer .f-top .f-t-box .f-t-content-n-border img{
    /* 调整图片的基线 */
    vertical-align: middle;
    margin-left: 10px;
}
.footer .f-top .f-t-box .f-t-content-n-border span{
    /* 调整文字的基线 */
    vertical-align: middle;
    margin-left: 10px ;
}
.footer .f-copyright{
    height: 87px;
    width: 100%;
    /* border: 2px solid tomato; */
    background-color: #000;
    text-align: center;
    font-size: 12px;
    color: #fff;
    /* line-height: 100px; */
    padding-top: 18px;
    box-sizing: border-box;
}

三、HTML 代码如下

<!DOCTYPE html>
<html lang="cn-ZH">
<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="E:\AAA_hailsham\1283646852\FileRecv\20230304\20230304\homepage.css">
</head>
<body>
    <div class="header">
        <div class="h-logo" >
            <div class="h-l-content">
                <div class="logo-box">
                    <img src="./imgs/logo.png" alt="">
                </div>
                <div class="search-box">
                    <div class="s-login" >
                        <a href="#">登录</a>
                        <span>|</span>
                        <a href="#">注册</a>
                    </div>
                    <div class="s-input">
                        <!--placeholder 设置输入框的提示文字 -->
                        <input type="text" placeholder="热门搜索：@李桥桉">
                        <img src="./imgs/ss.png" alt="">
                    </div>
                    <div class="s-icon">
                        <a href="#">
                            <img src="./imgs/gt3.png" alt="">
                        </a>
                        <a href="#">
                            <img src="./imgs/gwc.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="h-nav">
            <ul div class="h-menu">

                <a href="#" >首页</a>
                <a href="#" >所有商品</a>
                <a href="#" >装饰摆件</a>
                <a href="#" >布艺软饰</a>
                <a href="#" >墙饰壁挂</a>
                <a href="#" >蜡艺香薰</a>
                <a href="#" >创意家居</a>                
            </ul>
        </div>
    </div>
    <div class="main">
        <div class="m-banner" >
            <div class="m-box">
                <div class="m-picture">
                    <img src="./imgs/banner1.jpg" alt="">
                </div>
            </div>
        </div>
        <div class="m-entry" >
            <div class="m-entry-box">
                <img src="./imgs/i1.jpg" alt="">
            </div>
            <div class="m-entry-box">
                <img src="./imgs/i2.jpg" alt="">
            </div>
            <div class="m-entry-box">
                <img src="./imgs/i3.jpg" alt="">
            </div>
        </div>
        <div class="m-goods" >
            <div class="m-g-title">
                <img src="./imgs/ih3.jpg" alt="">
            </div>
            <div class="m-g-content">
                <div class="content-box">
                    <div class="c-row">
                        <div class="content-box">
                            <img src="./imgs/s1.jpg" alt="">
                            <p>【最家】壁饰墙饰软装@李桥桉</p>
                            <span>￥668.00</span>
                        </div>
                        <div class="content-box">
                            <img src="./imgs/s12.jpg" alt="">
                            <p>【最家】壁饰墙饰软装@李桥桉</p>
                            <span>￥668.00</span>
                        </div>
                        <div class="content-box">
                            <img src="./imgs/s3.jpg" alt="">
                            <p>【最家】壁饰墙饰软装@李桥桉</p>
                            <span>￥668.00</span>
                        </div>
                        <div class="content-box">
                            <img src="./imgs/s4.jpg" alt="">
                            <p>【最家】壁饰墙饰软装@李桥桉</p>
                            <span>￥668.00</span>
                        </div>
                    </div>
                    <div class="c-row">
                        <div class="content-box">
                            <img src="./imgs/s5.jpg" alt="">
                            <p>【最家】壁饰墙饰软装@李桥桉</p>
                            <span>￥668.00</span>
                        </div>
                        <div class="content-box">
                            <img src="./imgs/s6.jpg" alt="">
                            <p>【最家】壁饰墙饰软装@李桥桉</p>
                            <span>￥668.00</span>
                        </div>
                        <div class="content-box">
                            <img src="./imgs/s7.jpg" alt="">
                            <p>【最家】壁饰墙饰软装@李桥桉</p>
                            <span>￥668.00</span>
                        </div>
                        <div class="content-box">
                            <img src="./imgs/s8.jpg" alt="">
                            <p>【最家】壁饰墙饰软装@李桥桉</p>
                            <span>￥668.00</span>
                    </div>
                </div>
                <div class="c-row">
                    <div class="content-box">
                        <img src="./imgs/s9.jpg" alt="">
                        <p>【最家】壁饰墙饰软装@李桥桉</p>
                        <span>￥668.00</span>
                    </div>
                    <div class="content-box">
                        <img src="./imgs/s10.jpg" alt="">
                        <p>【最家】壁饰墙饰软装@李桥桉</p>
                        <span>￥668.00</span>
                    </div>
                    <div class="content-box">
                        <img src="./imgs/s11.jpg" alt="">
                        <p>【最家】壁饰墙饰软装@李桥桉</p>
                        <span>￥668.00</span>
                    </div>
                    <div class="content-box">
                        <img src="./imgs/s12.jpg" alt="">
                        <p>【最家】壁饰墙饰软装@李桥桉</p>
                        <span>￥668.00</span>
                    </div>
                </div>
                </div>
            
        </div>
    </div>

<div class="footer">
    <div class="f-top">
        <div class="f-t-box">
            <div class="f-t-content">
                <img src="./imgs/foot1.png" alt="">
                <span>7天无理由退货</span>
            </div>
            <div class="f-t-content">
                <img src="./imgs/foot2.png" alt="">
                <span>15天免费换货</span>
            </div>
            <div class="f-t-content">
                <img src="./imgs/foot3.png" alt="">
                <span>满599包邮</span>
            </div>
            <div class="f-t-content f-t-content-n-border">
                <img src="./imgs/foot4.png" alt="">
                <span>手机特色服务</span>
            </div>
        </div>
    </div>
    <div class="f-copyright">
        <p>"家居网页©2022-2023版权所有@李桥桉 京ICP备080100-xx号</p>
        <p>违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
    </div>
</div>
</body>
</html>

四 、完整“．ｃｓｓ”／＂．ｈｔｍｌ＂文件及图片获取

搜索公粽号＠李桥桉，回复【家居网首页①】即可ｇｅｔ．

注：图片素材来源于蜗牛学苑

李桥桉
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML静态网页作业
02-15
北邮信息网络应用基础HTML静态网页作业，下载后注意修改后使用（@-@）
vscode将html页面部署到网站,快速入门：使用 Azure Static Web Apps 生成第一个静态站点...
weixin_42223667的博客
06-03 3285
您现在访问的是微软AZURE全球版技术文档网站，若需要访问由世纪互联运营的MICROSOFT AZURE中国区技术文档网站，请访问 https://docs.azure.cn.快速入门：使用 Azure Static Web Apps 生成第一个静态站点08/13/2020本文内容Azure Static Web Apps 通过从代码存储库生成应用程序发布网站。 在本快速入门中，你可以使用 Vis...
HTML静态网页作业(HTML+CSS)——外卖平台主题网页设计制作(8个页面)
weixin_42283461的博客
02-05 4994
学生静态网页作业--外卖平台网页设计（8页）
用vscode编写静态页面_[ 从零开始配置一个 Windows 前端开发环境 ] - 二：vscode
weixin_39905695的博客
12-22 1252
"editor.minimap.renderCharacters": false,"editor.minimap.maxColumn": 200,"editor.minimap.showSlider": "always"复制代码效果还是比较显著的：插件当然，之所以选择 Vscode，除了本身强大以外，更重要的是那完整的生态，丰富的插件——事实上，如果不考虑这些，也许我会用 Atom。这个插件主要作...
001 前端 VSCode编辑器 网页
m0_46695127的博客
03-10 351
01 前端 VSCode编辑器 网页
1000套web前端期末大作业 HTML+CSS+JavaScript网页设计实例 企业网站制作【建议收藏】
热门推荐
HTML网页设计
07-27 4万+
1.网页作品简介方面HTML期末学生结课大作业作品(HTML+CSS+JS)，响应式布局网站源码！兼容pc以及移动端，内涵js交互，ui交互，页面质量高非常适合，2.网页作品编辑方面此作品为学生个人主页网页设计题材，代码为A+学生水平所有编辑器均可使用）3.网页作品布局方面网页布局整体为LOGO、导航、主体内容布局。子页面多种布局，兴趣爱好内容使用图片列表布局，成绩页面插入了表格，联系我们使用图片对齐方式设置了左对齐。4.网页作品技术方面。...
HTML网页设计结课作业——11张精美网页 html+css+javascript+bootstarp
qq__3200628753的博客
12-23 81
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Websto...
HTML+CSS大学生个人网站作业模板~黑色的html5个人博客网站模板整站下载
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-04 1万+
HTML期末大作业~ 学生HTML个人网页作业作品下载 ~个人主页博客网页设计制作 ~大学生个人网站作业模板 ~简单个人网页制作 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 1.网页作品简介方面 ：黑色的html5
WEB前端静态网页（div+css）
weixin_44924495的博客
06-06 1463
⛵ 源码获取 文末联系 ✈`1、HTML:HTML是最基础的技术，用于定义页面的结构和内容。它包含了页面的主要元素，如标题、段落、列表、超链接、图像等等。 2、CSS:CSS用于控制页面的风格和布局。它可以控制字体、颜色、大小和页面的排版，使你的页面看起来更美观、高效、专业。代码如下（示例）： 2 页面展示 学的反而越迷茫
静态HTML旅行主题网页作业——青岛民俗7页html+css+javascript+jquery 地方民俗网页设计与实现
专注于dreamweaver网页设计制作
12-24 210
网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；网页编辑方面。
大学生静态网页设计期末作业源码前端静态网页大作业源码.zip
06-18
大学生静态网页设计期末作业源码前端静态网页大作业源码，使用的是原生的 html，css，js 代码，期末作业必过，高分必备。 大学生静态网页设计期末作业源码前端静态网页大作业源码，使用的是原生的 html，css，js ...
大学生Web前端静态网页设计期末大作业（高分必看）.zip
06-09
大学生Web前端静态网页设计期末大作业...大学生Web前端静态网页设计期末大作业（高分必看）大学生Web前端静态网页设计期末大作业（高分必看）大学生Web前端静态网页设计期末大作业（高分必看）使用的是原生的 html...
静态网页设计期末大作业HTML+CSS的Web前端静态个人简历网页设计.zip
02-09
静态网页设计期末大作业HTML+CSS的Web前端静态个人简历网页设计.zip 95分以上必过项目，代码完整下载即用，确保可以运行。 静态网页设计期末大作业HTML+CSS的Web前端静态个人简历网页设计.zip 95分以上必过项目，...
大学生Web前端期末静态网页设计作业html源代码
12-25
大学生Web前端期末静态网页设计作业html源代码 Web 前端静态网页大作业，使用的是原生的 html，css，js 代码
基于HTML+CSS的模仿奔驰官网前端静态网页+预览链接.zip
07-07
基于HTML+CSS的模仿奔驰官网前端静态网页+预览链接.zip 网页预览：https://chinastark.github.io/Website/qidian/index.html 【备注】 主要针对计算机相关专业的正在做毕设的学生和需要项目实战的Java、JavaScript、...
1. Tailwind CSS 简介
一名全栈开发工程师
04-21 483
Tailwind CSS 是一个高度可定制的、实用的 CSS 框架，它提供了一套丰富的工具类，使得开发者可以快速地构建现代化的用户界面。
HTML&CSS
最新发布
m0_69266818的博客
04-24 909
html中的标签和css的导入和选择器
CSS实现广告自动轮播
m0_72895175的博客
04-20 694
实现原理该广告轮播功能的实现主要依靠HTML和CSS。HTML负责搭建轮播框架，而CSS则控制样式和动画效果。通过CSS中的关键帧动画（Keyframes），我们可以定义图片在容器内的滚动效果，从而实现轮播功能。
CSS详解（一）
weixin_47194802的博客
04-24 852
行内元素可以通过设置内外边距（margin）、边框（border）和填充（padding）来调整其周围的间距和外观，但这些属性对行内元素的影响通常是垂直方向上的，水平方向上的影响有限。根据元素的属性值来选择元素。例如，[href] 选择具有 href 属性的所有元素，[title="example"] 选择 title 属性值为 "example" 的所有元素。选择某个元素的直接子元素。CSS 选择器允许你定义多个样式规则，这些规则可以根据选择器的优先级和特定的层叠规则来应用于元素，从而形成最终的样式。
web前端期末大作业 html css javascript网页设计实例 企业网站制作
06-28
回答3：</h3><br/>为了完成web前端期末大作业 html css javascript网页设计实例 企业网站制作，首先需要掌握HTML、CSS、JavaScript这3门语言的基本知识。HTML提供了网页的结构和内容，CSS则负责网页的外观和样式，而...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李桥桉

支持一下作者

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值