纯HTML+CSS网站首页布局实战

最新推荐文章于 2024-06-17 10:36:28 发布
最新推荐文章于 2024-06-17 10:36:28 发布
阅读量1.3k 收藏 21
点赞数 20
文章标签： html css 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67887035/article/details/134869252
版权

 一、根目录准备工作

首先在D/C盘中新建一个文件夹，在该文件夹中再新建四个文件夹，分别用来存放CSS样式（css）网页图标（images）内容图片（uploads）然后在文件夹中新建一个index.html文件

打开vscode将文件夹导入工作台，在css文件夹中新建三个css文件

其中在base.css我们将标签的默认样式去除，设置网页统一的字体样式

/* 去除常见标签默认的 margin 和 padding */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {
  font: 16px/1.5  "Microsoft Yahei",
    "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
  color: #333;
}

/* 去除列表默认样式 */
ul,
ol {
  list-style: none;
}

/* 去除默认的倾斜效果 */
em,
i {
  font-style: normal;
}

/* 去除a标签默认下划线，并设置默认文字颜色 */
a {
  text-decoration: none;
  color: #333;
}

/* 设置img的垂直对齐方式为居中对齐，去除img默认下间隙 */
img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

/* 去除input默认样式 */
input {
  border: none;
  outline: none;
  color: #333;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
}

二、网页素材准备

1.images素材
2.uploads

3.下载字体图标素材

我是在https://www.iconfont.cn/中下载的图标，里面有许多免费的图标。

将下载下来的文件夹解压，更名为iconfont

ps:这个是下载解压完毕的文件内容

三、head内容的插入

在meat标签中复制网页的介绍（合适的介绍可以提升网页的搜索排名）

使用link标签引入css样式代码

注意css引入的顺序，先清除的样式，再各个页面相同的样式，最后是首页特有的样式

四、网页快捷导航以及头部

1.快捷导航部分

所有准备工作完成后，在html<body>里面设置一个<div class="shortcut">

在里面在嵌套一个<div class="wrapper">存放内容

其中最后一个<li>标签在网页中带有字体图标所以需使用一个单独的标签<span>并且使用固定的类名方式引用这个图标【打开我们下载的字体图标文件（iconfont）里面的html文件，使用哪个图标就复制哪个图标的类名到icon font的后面】

<!-- 快捷导航 -->
    <div class="shortcut">
        <div class="wrapper">
            <ul>
                <li><a href="#" class="login">请先登录</a></li>
                <li><a href="#">免费注册</a></li>
                <li><a href="#">我的订单</a></li>
                <li><a href="#">会员中心</a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">在线客服</a></li>
                <li><a href="#"><span class="iconfont icon-mobile-phone"></span>手机版</a></li>
            </ul>
        </div>
    </div>

在common.css中编写版心的样式（因为所有的内容都是居中的，所以写入公共样式）

css:

/* 版心 */
.wrapper {
    margin: 0 auto;
    width: 1240px;
}

版心部分样式完成后，就开始布局快捷导航的样式

css:

/* 快捷导航 */
.shortcut {
    height: 52px;
    background-color: #333;
}

.shortcut .wrapper {
    display: flex;
    justify-content: flex-end;
    height: 52px;
    /* background-color: pink; */
}

.shortcut ul {
    display: flex;
    line-height: 52px;
}

.shortcut li a {
    padding: 0 15px;
    border-right: 1px solid #999;
    color: #fff;
    font-size: 14px;
}

.shortcut li:last-child a {
    border-right: 0;
}

.shortcut li .iconfont {
    margin-right: 4px;
    vertical-align: middle;
}

.shortcut li .login {
    color: #5eb69c;
}
2.网页头部

网页头部由四个部分组成，所以我们在一个大的<div>里嵌套四个小的<div>并添加内容

先设置头部的整体样式

css:

/* 头部 */
.header {
    display: flex;
    margin-top: 22px;
    margin-bottom: 22px;
    height: 88px;
    /* background-color: pink; */
}
①logo部分
   <!-- 头部 -->
    <div class="header wrapper">
        <!-- logo -->
        <div class="logo">
            <h1><a href="#">小兔鲜儿</a></h1>
        </div>

因为logo是网页最重要的部分所以使用一个<h1>标签（在一个网面中最好只使用一个h1标签）

css:

/* logo */
.logo {
    margin-right: 40px;
    width: 200px;
    height: 88px;
    /* background-color: blue; */
}

.logo a {
    display: block;
    width: 200px;
    height: 88px;
    background-image: url(../images/logo.png);
    font-size: 0;
}
②导航部分

使用<ul>嵌套<li>的方式添加导航内容

       <!-- 导航 -->
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">生鲜</a></li>
                <li><a href="#">美食</a></li>
                <li><a href="#">餐厨</a></li>
                <li><a href="#">电器</a></li>
                <li><a href="#">居家</a></li>
                <li><a href="#">洗护</a></li>
                <li><a href="#">孕婴</a></li>
                <li><a href="#">服装</a></li>
            </ul>
        </div>

添加导航样式

css:

/* 导航 */
.nav {
    margin-top: 33px;
    margin-right: 28px;
}

.nav ul {
    display: flex;
}

.nav li {
    margin-right: 47px;
}

.nav li a {
    padding-bottom: 10px;
    /* background-color: blue; */
}

.nav li a:hover {
    border-bottom: 2px solid #5eb69c;
    color: #5eb69c;
}

ps:导航部分设置是鼠标的悬停状态，当鼠标放上去时字体变换颜色并出现下划线

③搜索框部分

        <!-- 搜索 -->
        <div class="search">
            <span class="iconfont icon-search"></span>
            <input type="text" placeholder="搜一搜">
        </div>

<input>添加输入框，添加placeholder属性，可以添加提示文字

css:

/* 搜索 */
.search {
    display: flex;
    margin-top: 33px;
    margin-right: 45px;
    width: 170px;
    height: 34px;
    border-bottom: 2px solid #f4f4f4;
}

.search .iconfont {
    margin-right: 8px;
    font-size: 18px;
    color: #ccc;
}

.search input {
    /* 浏览器优先生效input的默认宽度，所以flex：1不生效 */
    /* 解决办法：重置input默认宽度 */
    width: 0;
    flex: 1;
}

.search input::placeholder {
    font-size: 16px;
    color: #ccc;
}
④购物车
 <!-- 购物车 -->
        <div class="cart">
            <span class="iconfont icon-cart-full"></span>
            <i>2</i>
        </div>

购物车也是一个字符图标所以和上面快捷导航的引入方式一样

css:

/* 购物车 */
.cart {
    position: relative;
    margin-top: 32px;
}

.cart .iconfont {
    font-size: 24px;
}

.cart i {
    position: absolute;
    top: 1px;
    /* right:右对齐，如果文字多，向左撑开会盖住其他内容 */
    left: 10px;
    padding: 0 6px;
    height: 15px;
    background-color: #e26237;
    border-radius: 8px;
    color: #FFFEFE;
    font-size: 14px;
    line-height: 15px;
}

数字2要压在购物车图标的上面，使用子绝父相的布局方式（使用左对齐的方式这样，如果数字内容变大，向右撑开盒子更加美观）

五、网页底部

底部分为三个部分

①服务
    <div class="footer">
        <div class="wrapper">
            <!-- 服务 -->
            <div class="service">
                <ul>
                    <li>
                        <h5></h5>
                        <p>价格亲民</p>
                    </li>

共有四个服务，所以复制粘贴4个<li>标签

<h5>里面放小图片

使用html精灵图的方式，将网页中所用到的所有小图整合在一起使用时通过定位来让它显示出来

css:

.footer {
    height: 580px;
    background-color: #f5f5f5;
}

/* 服务 */
.service {
    padding: 60px 0;
    height: 178px;
    border-bottom: 1px solid #e8e8e8;
}

.service ul {
    display: flex;
    justify-content: space-evenly;
}

.service li {
    display: flex;
    width: 190px;
    height: 58px;
    /* background-color: pink; */
}

.service li h5 {
    margin-right: 20px;
    width: 58px;
    height: 58px;
    background-image: url(../images/sprite.png);
}

.service li p {
    font-size: 28px;
    line-height: 58px;
}

.service li:nth-child(2) h5 {
    background-position: 0 -58px;
}
 ②帮助中心
           <!-- 帮助中心 -->
            <div class="help">
                <div class="left">
                    <dl>
                        <dt>购物指南</dt>
                        <dd><a href="#"></a>购物流程</dd>
                        <dd><a href="#"></a>支付方式</dd>
                        <dd><a href="#"></a>售后规则</dd>
                    </dl>



                <div class="right">
                    <ul>
                        <li>
                            <div class="pic"><img src="./images/wechat.png" alt=""></div>
                            <p>微信公众号</p>
                        </li>
                        <li>
                            <div class="pic"><img src="./images/app.png" alt=""></div>
                            <p>APP下载二维码</p>
                        </li>
                    </ul>
                </div>

分为左右两个部分，使用flex布局 使他们在用一水平线

左边共有五的列表，所以复制五份标题列表

css:

.help {
    display: flex;
    justify-content: space-between;
    padding-top: 60px;
    height: 300px;
    /* background-color: pink; */
}

/* left */
.help .left {
    display: flex;
}

.help .left dl {
    margin-right: 84px;
}

.help .left dl:last-child {
    margin-right: 0;
}

.help .left dt {
    margin-bottom: 30px;
    font-size: 18px;
}

.help .left dd {
    margin-bottom: 10px;
}

.help .left a {
    color: #969696;
}

.help .left .iconfont {
    color: #5eb69c;
}

/* right */
.help .right ul {
    display: flex;
}

.help .right li:first-child {
    margin-right: 55px;
}

.help .right .pic {
    margin-bottom: 10px;
    width: 120px;
    height: 120px;
}

.help .right p {
    color: #969696;
    text-align: center;
}
 ③版权
            <div class="copyright">
                <p>
                    <a href="#">关于我们</a>|
                    <a href="#">帮助中心</a>|
                    <a href="#">售后服务</a>|
                    <a href="#">配送与验收</a>|
                    <a href="#">商务合作</a>|
                    <a href="#">搜索推荐</a>|
                    <a href="#">友情链接</a>
                </p>
                <p>CopyRight © 小兔鲜</p>
            </div>

因为已是网页尾部且无需换行所以直接用<p>标签将所有的文字包含起来

css:

/* 版权 */
.copyright {
    text-align: center;
}

.copyright p {
    margin-bottom: 10px;
    color: #A1A1A1;
}

.copyright p a {
    margin: 0 10px;
    color: #A1A1A1;
}

六 、banner区域

网页的头部和尾部完成后，就开始添加网页中间的内容和样式（现在要在index.css文件中写样式）

首先是banner区，我们将banner区域分为三个小部分

先将banner整体布局出来 

/* banner */
.banner {
    height: 500px;
    background-color: #f5f5f5;
}

.banner .wrapper {
    position: relative;
    height: 500px;
    background-color: pink;
    overflow: hidden;
}
① 图片

因为我们这有三个圆点，所以要有三张图片（未来使用js实现轮播图的效果）

  <div class="banner">
        <div class="wrapper">
            <!-- 图片 -->
            <ul class="pic">
                <li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
                <li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
                <li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
            </ul>

使用布局方式，使三张图片在同一水平线上，并且隐藏后面两张图片 

/* 图片 */
.banner .pic {
    display: flex;
    /* flex布局 父级宽度不够，子级被挤小，增大父级尺寸 */
    width: 3720px;
}
②侧导航

同样需要几个就复制几个相同的<li>修改里面内容即可

           <div class="subnav">
                <ul>
                    <li>
                        <div><a href="#" class="classify">生鲜</a><a href="#">水果</a><a href="#">蔬菜</a></div>
                        <span class="iconfont icon-arrow-right-bold"></span>
                    </li>
                    <li>
                        <div><a href="#" class="classify">美食</a><a href="#">面点</a><a href="#">干果</a></div>
                        <span class="iconfont icon-arrow-right-bold"></span>
                    </li>

 侧导航整体都需要提示用户可以点击，所以在<div>中转换鼠标的状态，提示用户可以点击，且当鼠标滑上去的时候块要变换颜色

.subnav {
    position: absolute;
    left: 0;
    top: 0;
    width: 250px;
    height: 500px;
    background-color: rgba(0,0,0,0.42);
}

.subnav li {
    display: flex;
    justify-content: space-between;
    padding-left: 30px;
    padding-right: 12px;
    height: 50px;
    /* background-color: pink; */
    line-height: 50px;
    color: #fff;
    cursor: pointer;
}

/*  a所有都是小字，分类是大字*/
.subnav li a {
    margin-right: 5px;
    font-size: 14px;
    color: #fff;
}

.subnav li .classify {
    margin-right: 14px;
    font-size: 16px;
}

.subnav li .iconfont {
    font-size: 14px;
}

.subnav li:hover {
    background-color: #00be9a;
}
③圆点

可以将圆点看作是大圆套小圆，默认状态下，大圆不显示(<li>标签)小圆样式统一（<i>标签）

            <!-- 圆点 -->
            <ol>
                <li class="curent"><i></i></li>
                <li><i></i></li>
                <li><i></i></li>
            </ol>
        </div>

为统一的三个圆点设置样式

/* 圆点 */
.banner ol {
    position: absolute;
    bottom: 17px;
    right: 16px;
    display: flex;
}

.banner ol li {
    width: 22px;
    height: 22px;
    /* background-color: pink; */
    border-radius: 50%;
    margin-left: 8px;
    cursor: pointer;
}

.banner ol i {
    margin: 4px;
    display: block;
    width: 14px;
    height: 14px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
}

 随便给一个<li>标签设置类名，区分开默认<li>单独设置样式

/* 选中：li半透明 i白色 */
.banner ol .curent {
    background-color: rgba(255, 255, 255, 0.5);
}

.banner ol .curent i {
    background-color: #fff;
}

 七、网页产品布局

该网页分为七个内容，以新鲜好物和生鲜为例，其他复制粘贴修改内容即可

①新鲜好物

标题部分可拆分为左右两个部分

   <!-- 新鲜好物 -->
    <div class="goods wrapper">
        <!-- 标题 -->
        <div class="title">
            <div class="left">
                <h3>新鲜好物</h3>
                <p>新鲜出炉 品质靠谱</p>
            </div>
            <div class="right">
                <a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
            </div>
        </div>

因为标题的样式下面其他部分也会用到，所以我们将样式写为公共的样式，供其他部分使用

（其他部分使用要调用相同的类名）

使用flex布局，将标题布局成左右的形式 

/* 新鲜好物 */
/* 标题--公共 */
.title {
    display: flex;
    justify-content: space-between;
    height: 42px;
    /* background-color: pink; */
    margin-top: 40px;
    margin-bottom: 30px;
}

.title .left {
    display: flex;
}

.title .left h3 {
    font-size: 30px;
    margin-right: 35px;
}

.title .left p {
    align-self: flex-end;
    color: #a1a1a1;
}

.title .right .more {
    line-height: 42px;
    color: #a1a1a1;
}

.title .right .more .iconfont {
    margin-left: 10px;
}

 新鲜好物的内容用<ul>嵌套<li>再嵌套<a>标签实现跳转，需要4个

        <div class="bd">
            <ul>
                <li>
                    <a href="#">
                        <div class="pic"><img src="./uploads/goods1.png" alt=""></div>
                        <div class="txt">
                            <h4>KN95级莫兰迪色防护口罩</h4>
                            <p>￥<span>79</span></p>
                        </div>
                    </a>
                </li>

因为商品的价格不是固定的所以单独放在一个标签里面，未来上传数据方便修改 

好物的内容样式也设置成公共样式，方便其他内容的使用，也可减少相应的代码量

/* 好物内容 -- 公共 */
.bd ul {
    display: flex;
    justify-content: space-between;
}

.bd li {
    width: 304px;
    height: 404px;
    background-color: #eef9f4;
}

.bd li .pic {
    width: 304px;
    height: 304px;
}

.bd li .txt {
    text-align: center;
}

.bd li h4 {
    margin-top: 18px;
    margin-bottom: 8px;
    font-size: 20px;
}

.goods .bd p {
    margin-right: 3px;
    font-size: 18px;
    color: #aa2113;
}

.goods .bd p span {
    font-size: 22px;
}

/* 人气推荐 */
.recommend .bd li {
    background-color: #fff;
}

.recommend .bd p {
    color: #a1a1a1;
}
②生鲜

生鲜部分的标题和好物的标题一样但多了导航栏

可以将好物的标题代码复制给生鲜，并在右侧添加导航部分

        <!-- 标题 -->
        <div class="title">
            <div class="left">
                <h3>生鲜</h3>
            </div>
            <div class="right">
                <ul>
                    <li><a href="#" class="active">热门</a></li>
                    <li><a href="#">蔬菜</a></li>
                    <li><a href="#">肉禽蛋</a></li>
                    <li><a href="#">水果</a></li>
                    <li><a href="#">海鲜</a></li>
                    <li><a href="#">零食</a></li>
                    <li><a href="#">饮料</a></li>
                </ul>
                <a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
            </div>
        </div>

 将生鲜的导航也写成公共样式方便其他相同布局的内容使用

/* 生鲜 */
.fresh .title {
    margin-top: 60px;
    margin-bottom: 20px;
}

.title .right {
    display: flex;
}

.title .right ul {
    display: flex;
    margin-top: 10px;
    margin-right: 58px;
}

.title .right ul a {
    display: block;
    margin-left: 6px;
    padding: 0 7px;
    height: 20px;
    /* background-color: pink; */
    line-height: 20px;
}

/* .title .right li a:hover {
    background-color: #00be9a;
    color: #fff;
} */

.title .right ul .active {
    color: #fff;
    background-color: #00be9a;
}

 注释掉部分原本想当鼠标滑倒上去改变字体颜色，但后面想用js来实现转换

生鲜部分的内容分为左右两个部分，左边直接一个<div>加入图片，右边使用<ul>嵌套<li>

       <div class="content">
            <div class="left">
                <a href="#"><img src="./uploads/fresh_left.png" alt=""></a>
            </div>
            <div class="right">
                <ul>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/fresh1.png" alt=""></div>
                            <div class="txt">
                                <div class="info">
                                    <h4>双味千层，手抓饼烤肉组合</h4>
                                    <p>240g/袋 4片装</p>
                                    <p>加热即食</p>
                                </div>
                                <p class="price">￥<span>89.99</span></p>
                            </div>
                        </a>

 设置生鲜产品内容图片和产品信息对应的字体样式

/* 生鲜内容 */
.content {
    display: flex;
    justify-content: space-between;
}

.content .left {
    width: 248px;
    height: 610px;
    /* background-color: pink; */
}

.content .right {
    width: 968px;
    height: 610px;
    /* background-color: pink; */
}

.content .right ul {
    display: flex;
    flex-wrap: wrap;
}

.content .right li {
    position: relative;
    padding: 10px 21px 0;
    width: 242px;
    height: 305px;
    border: 2px solid #fff;
    /* 隐藏绿色cover */
    overflow: hidden;
}

/* 产品内容 */
.content .pic {
    width: 200px;
    height: 180px;
}

.content .info {
    height: 60px;
    margin-top: 14px;
    margin-bottom: 5px;
    line-height: 19px;
}

.content .price {
    color: #af2f22;
}

.content .price span {
    margin-left: 5px;
    font-size: 22px;
}

都设置好后，添加一个产品的右侧<li>中添加一个<div>

 <div class="cover">
                            <p>找相似</p>
                            <p></p>
                            <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
                        </div>

设置样式使鼠标滑动到产品内容上出现一个绿框

/* 产品底部绿色区域 */
.content li .cover {
    position: absolute;
    left: 0;
    bottom: -86px;
    padding-top: 15px;
    width: 242px;
    height: 84px;
    background-color: #00be9a;
    text-align: center;
    color: #fff;
    transition: all 0.5s;
}

.content .cover p:first-child {
    font-size: 18px;
}

.content .cover p:nth-child(2) {
    margin: 3px auto 6px;
    width: 120px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.11);
}

.content .cover p:nth-child(3) {
    font-size: 13px;
}

.content .cover p:nth-child(3) .iconfont {
    font-size: 13px;
}

/* 鼠标悬停到li,显示cover 改变位置 */
.content .right li:hover .cover {
    bottom: 0;
}

.content .right li:hover {
    border: 2px solid #00be9a;
}

最后将其他相同布局的内容复制修改，完成网页首页的布局

八、总结

在写代码的时候，要时不时的看一下代码的效果，最好使用边写边自动保存的插件，别等最后写完了才发现有什么字体样式不正确之类的，（我就是因为最后的底部没有看，导致后面发现字体颜色出错）。

在布局的时候，可以使用Pxcook将设计稿导入，方便我们知道内容的大小，减少布局时出现差错，与设计稿相同

源码和效果展示都在文章的压缩包里开头

二十十十十十
关注
  • 20
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
HTML+CSS+JS网页设计期末课程大作业—— 绿色化妆品HTML+CSS+JavaScript
HTML网页设计
08-10 2361
💄美妆介绍、👜美妆分享、👒 品牌化妆品官网网站 、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设......
网站首页布局设计
07-24
网站首页布局设计
HTML+CSS大作业：使用html设计一个简单好看的公司官网首页 浮动布局
最新发布
dreamweaver网页设计
06-17 586
🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】 🔖 HTML+CSS+JS实例代码： 【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新
静态网页（纯CSS和html）
10-10
静态网页，参加了教程，重点是响应式页面的实现，对css布局有了更深的认识。
网站首页应该如何布局
站帮网CSDN
04-06 1150
一、网站具有清晰的导航 当游客进入一个陌生的网站时，他们根据什么去制定自己的需求，答案只有一个那就是网站的导航。一个清晰明了的用户导航可以让游客在网站中自由的访问，并且根据需要选择合适的内容，而网站导航的加入也可以加大网友的访问深度。就像是上面的截图一样，当我想选择一种图形处理的软件，我可以轻松地找到，并且随时随刻都能回到首页。 二、页面整洁，栏目之间合理布局 之前看过一个做服装
用html和css创建一个最基本的网页
2202_75879208的博客
08-14 1004
用html和css制作最基本的网页内容，并把多个网页关联到一起
一个简单的HTML网页 、个人主页网页设计(HTML+CSS)
12-09 1846
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
Div+Css页面布局实战
06-16
9. 实战项目：通过一系列实战案例，如模拟电商首页、博客布局等，锻炼并巩固所学的Div+CSS布局技巧。 课程提供的三个压缩包文件可能是不同章节或课时的资源，包含了课程的讲义、示例代码、练习题等辅助学习材料。...
HTML+Javascript+Css实战题
06-08
这组“HTML+Javascript+Css实战题”旨在帮助你深入理解和应用这些技术。 首先，HTML是网页的基础。它通过一系列标签来组织内容，如`<html>`、`<head>`、`<body>`、`<h1>`、`<p>`等。在实战题中，你可能会遇到如何...
div+css实战主页html模板下载
04-02
3. **CSS布局技术**：在"div+css"中，布局技术至关重要，如浮动（float）、定位（positioning）和Flexbox（弹性盒模型）或Grid（网格布局）。这些技术帮助开发者创建多列布局、对齐元素、响应式设计等。 4. **实战...
漂亮的html首页
04-12
漂亮的html首页，附加js文件和css文件，高端大气上档次
淘宝首页html模板
04-06
淘宝首页html模板淘宝首页html模板淘宝首页html模板淘宝首页html模板淘宝首页html模板
漂亮html主页
04-10
精美的html首页代码，包括html，js和css文件，你值得拥有
网站页面布局
mini白的博客
07-25 1206
网站页面布局分为编码布局和视觉布局： 1、编码布局： （1）div+css布局 （2）iframe布局（只限特殊地方使用） （3）表格布局（只限特殊地方使用） 2、视觉布局： （1）全屏布局 （2）瀑布流布局 （3）无缝拼图布局等等...
使用html+css实现一个静态页面（含源码）
HTML网页设计
07-27 3862
使用html+css实现一个静态页面（含源码）
企业网站首页结构布局几点心得感悟
willhuo的专栏
10-23 1519
 我们知道，网站首页是企业站点品牌和形象的展示窗口，而网站首页的设计要通过企业的网站策划专员将企业的一些能够体现品牌价值的细节，交给网站设计师，设计师按照文案的内容和要求来填充网站的内容。在正式布局网站内容之前，我们站长必须明确网站合理的结构是非常重要的，那么网站结构是网站的大骨架，我们要怎样来进行布局和体现呢。 　　第一，首先要依据网站定位设计主题模板。网站定位就是网站所属行业和用户群体
HTML+CSS纯静态页面布局的理解（一）
weixin_42349568的博客
07-07 1325
总结： 一，总的来说就是一个拆解的过程。类比于树状结构，不断划分板块。层层细化，然后把每个板块作好。 二，板块或者元素的布局，依据我目前掌握的知识，有以下几点： 1，利用文档流的基本性质。 2，利用浮动float。 3，利用定位position。 当然这三种都得基于理解了盒模型之后再进行，利用盒模型配合着这三种方式进行。 接下来展开说明这两点感悟。 第一点：将总的页面划分为几个板块，然后每个板块又划分为几个部分，以此类推，一直划分下去。 例如上图，拿过来之后，就可以划分为：header,content,f
制作一个简单HTML静态网页（HTML+CSS）
HTML网页设计
08-02 3681
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值