CSS网页设计

最新推荐文章于 2024-06-20 20:19:27 发布
最新推荐文章于 2024-06-20 20:19:27 发布
阅读量141 收藏
点赞数
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62439904/article/details/134493137
版权

最终页面如下图所示，仅展示部分代码，需要完整代码的，私信博主免费私发。

 

 

以下展示部分代码，完整版私信博主
<!-- 添加背景色后的最终版本 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>shopcmd云云</title>
  <link rel="stylesheet" href="css/reset.css">
  <style>
    body {
      /* 为什么下面的fafafa会有红色背景提示 */
      background-color: #fafafa;
    }
    .w1247 {
      width: 1247px;
      margin: 0 auto;
    }
    .w1054 {
      width: 1054px;
    }
    .h100 {
      height: 100px;
    }
    .tex-al {
      text-align: center;
    }
    .pt64 {
      padding-top: 64px;
    }
    .pb60 {
      padding-bottom: 60px;
    }
    .mt50 {
      margin-top: 50px;
    }
    .mb50 {
      margin-bottom: 50px;
    }
    .mb44 {
      margin-bottom: 44px;
    }
    .mb24 {
      margin-bottom: 24px;
    }
    .mb60 {
      margin-bottom: 60px;
    }
    .bgfff {
      background-color: #fff;
    }
    .marg-center {
      margin: 0 auto;
    }
    .pad-center {
      padding: 0 auto;
    }
    .fl {
      float: left;
    }
    .logo {
      padding-right: 369px;
    }
    .nav li {
      float: left;
      padding-right: 39px;
    }
    .nav li a {
      font-size: 18px;
      font-weight: normal;
      color: #333;
      line-height: 100px;
    }
/* 省略****** */
<body>
  <div class="header h100 bgfff">
    <div class="header-wrap clearfix w1247">
      <div class="logo fl">
        <h1>
          <a href="#">
            <img src="img/logo.png" width="223" height="100" alt="logo">
          </a>
        </h1>
      </div>
      <div class="nav fl">
        <ul class="clearfix">
          <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>
    </div>
  </div>
  <div class="banner">
    <img src="img/banner.jpg" alt="banner" width="1903" height="620">
  </div>
  <div class="content ">
    <div class="server-wrap w1054 marg-center">
      <div class="server-title pt64 tex-al">
        <img src="img/ser.png" alt="server" width="167" height="46">
      </div>
      <p>shopcmd云道，国内领先的独立电商解决方案及全渠道营销平台。完整的产品体系，简约的系统，个性化前端，全覆盖多渠道营销体系...
        我们致力于打造一个服务于品牌商城/独立电商的完整生态，让企业的独立电商之路变得更简单，也更有价值！</p>
      <div class="server-content mt50 mb60">
        <ul class="clearfix">
          <li>
            <img src="img/icon1.png" alt="icon1" width="248" height="132">
            <h2>我是卖家</h2>
            <p>shopcmd云电商解决方案，我们不仅
              仅是领先的独立商城建站系统。我们
              从互联网时代品牌建设和品牌营销的全
              新视角，赋予了品牌商城及独立电商更
              大的生存空间和存在价值！</p>
            <a href="#">我要建站</a>
          </li>
          <li>
            <img src="img/icon1.png" alt="icon1" width="248" height="132">
            <h2>我是卖家</h2>
            <p>shopcmd云电商解决方案，我们不仅
              仅是领先的独立商城建站系统。我们
              从互联网时代品牌建设和品牌营销的全
              新视角，赋予了品牌商城及独立电商更
              大的生存空间和存在价值！</p>
            <a href="#">我要建站</a>
          </li>
          <li>
            <img src="img/icon1.png" alt="icon1" width="248" height="132">
            <h2>我是卖家</h2>
            <p>shopcmd云电商解决方案，我们不仅
              仅是领先的独立商城建站系统。我们
              从互联网时代品牌建设和品牌营销的全
              新视角，赋予了品牌商城及独立电商更
              大的生存空间和存在价值！</p>
            <a href="#">我要建站</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="bgfff">
      <div class="case-wrap marg-center w1054">
        <div class="case-title pt64 mb44 tex-al">
          <img src="img/case.png" alt="case" width="167" height="45">
        </div>
        <div class="case-content pb60">
          <ul class="clearfix">
            <li>
              <img src="img/pro1.png" alt="pro" width="324" height="211">
              <p>帮助中小企业快速开启阿萨德打撒电子...</p>
              <div class="mask"></div>
              <div class="left-icon">&lt;</div>
            </li>
            <li>
              <img src="img/pro1.png" alt="pro" width="324" height="211">
              <p>帮助中小企业快速开启阿萨德打撒电子...</p>
              <div class="mask"></div>
            </li>
            <li>
              <img src="img/pro1.png" alt="pro" width="324" height="211">
              <p>帮助中小企业快速开启阿萨德打撒电子...</p>
              <div class="mask"></div>
              <div class="right-icon">&gt;</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="media-wrap w1054 marg-center">
      <div class="media-title pt64 mb50 tex-al">
        <img src="img/media.png" alt="server" width="167" height="46">
      </div>
      <div class="media-content">
        <ul class="clearfix">
          <li><img src="img/tb.png" alt="tb" width="103" height="40"></li>
          <li><img src="img/tb.png" alt="tb" width="103" height="40"></li>
          <li><img src="img/tb.png" alt="tb" width="103" height="40"></li>
          <li><img src="img/tb.png" alt="tb" width="103" height="40"></li>
          <li><img src="img/tb.png" alt="tb" width="103" height="40"></li>
          <li><img src="img/tb.png" alt="tb" width="103" height="40"></li>
          <li><img src="img/tb.png" alt="tb" width="103" height="40"></li>
          <li><img src="img/tb.png" alt="tb" width="103" height="40"></li>
          <li><img src="img/tb.png" alt="tb" width="103" height="40"></li>
          <li><img src="img/tb.png" alt="tb" width="103" height="40"></li>
          <li><img src="img/tb.png" alt="tb" width="103" height="40"></li>
          <li><img src="img/tb.png" alt="tb" width="103" height="40"></li>
          <li><img src="img/tb.png" alt="tb" width="103" height="40"></li>
          <li><img src="img/tb.png" alt="tb" width="103" height="40"></li>
          <li><img src="img/tb.png" alt="tb" width="103" height="40"></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="bottom tex-al">
    <p class="bottom-link mb24">
      <a href="#">shopcmd</a>
      <span>|</span>
      <a href="#">首页</a>
      <span>|</span>
      <a href="#">官网云商城</a>
      <span>|</span>
      <a href="#">智慧门店</a>
      <span>|</span>
      <a href="#">营销平台</a>
      <span>|</span>
      <a href="#">媒体联盟</a>
      <span>|</span>
      <a href="#">关于我们</a>
    </p>
    <p class="copyright">©Copyright 2015 苏州海云网络科技有限公司版权所有 | 苏ICP备15038170号-3
    </p>
  </div>
</body>
</html>

 

云上成理
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
html+css网页设计源码(简洁)-我的音乐
而风不止
11-27 3729
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，音乐网页设计 | 仿网易云音乐 | 各大音乐官网网页 | 明星音乐演唱会主题 | 爵士乐音乐 | 民族音乐 | 等网站的设计与制作 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
网页设计之CSS
qq_53677566的博客
10-05 1万+
文章目录CSS笔记一.CSS概述二.基本语法1.行内样式表2.内嵌样式表3.外联样式表4.各种样式表优缺点5.应用代码三.选择器（常用）1.标签选择器2.id选择器3.类选择器4.通配选择器5.选择器组合6.选择器优先级7.具体代码演示四.基本属性1.文本2.背景3.列表4.伪类5.透明五.标签分类和display属性1.块级标签2.行级标签3.行级块标签4.display属性六.div和span标签1.div2.span无可代替的标签：【重要】七.盒子模型1.内容区（content）2.内边距（paddi
css 页面设计,60个精品CSS网页设计欣赏
weixin_31931045的博客
08-03 1903
60个精品CSS网页设计欣赏8月 5, 2011评论SponsorCSS是一门简单又复杂的语言，我认为作为一名专业的网页设计师，我们应该去了解它甚至精通它，CSS目前已经发展到CSS3，我觉得它算是一门伟大的艺术语言，网页设计师如果使用得当，将可以设计出很多高质量的作品，下面60多个网页都是使用CSS样式配合制作，设计非常精美，他们确实是很了不起的网页设计师，应该多学习，看了下面的例子我想你一定灵...
div+css网页设计例子
weixin_51286763的博客
09-25 4905
1、float： ❄设置浮动，类似于对齐 ❄如果上个元素没有设置浮动，会自动跑到下一行 如果设置了，会跟在上一个元素后面，这个时候如果不希望继续跟在上一个元素后面，可以用 clear：上一个元素的浮动方式 这样 ⭐详细可以参考这篇博客 经验分享：CSS浮动(float,clear)通俗讲解 ...
HTML+css网页设计
2301_76192170的博客
07-04 4976
<a href="#">关于我们</a></li><li><a href="#">联系方式</a></li><li><a href="#">首页</a>版权所有 © 2023 我的网页我的网页
HTML+CSS+JS网页设计
热门推荐
m0_73738929的博客
04-15 4万+
HTML页面主要由：登录、注册跳转页面，轮播图，家乡简介，热门景点，特色美食等组成。通过Div+CSS、鼠标滑过特效、获取当前时间，跳转页面、基本所需的知识点全覆盖。提示：以下是本篇文章正文内容，下面案例可供参考。
纯HTML+CSS网页设计期末作业
爱德苏的博客
05-29 1万+
喜欢水课的大学生的HTML期末大作业！！！
html 页面的分析与设计,HTML+CSS网页设计教程
weixin_39902184的博客
06-03 2861
HTML+CSS网页设计教程编辑锁定讨论上传视频本词条缺少概述图，补充相关内容使词条更完整，还能快速升级，赶紧来编辑吧！《HTML+CSS网页设计教程》是清华大学出版社出版的图书，作者是唐永芬。[1]书名HTML+CSS网页设计教程作者唐永芬出版社清华大学出版社出版时间2020年1月11日定价46 元ISBN9787512141476印次1-1内容简介本书编者根据多...
HTML5+CSS网页设计概述
橘猫吃不胖的博客
09-27 2925
HTML5+CSS网页设计概述1 网页概述1.1 认识网页1.2 网页名词解释1.3 web标准2 网页制作技术入门2.1 HTML2.2 CSS2.3 JavaScript2.4 网页的展示平台——浏览器3 阶段案例——创建第一个网页 1 网页概述 1.1 认识网页 网页是承载各种网站应用和信息的容器，所有可视化的内容都会通过网页展示给用户。 以CSDN首页为例，可以看到网页主要由文字、图像和超链接1等元素构成。当然除了这些元素，网页中还可以包含音频、视频以及动画等。 下面是CSDN首页的源代码，这是一
网页设计css分析,基于CSS技术的网页制作实例分析
weixin_32251525的博客
08-03 1479
21世纪我国科学技术水平大幅提高，计算机网络技术成为了推动各行各业事业发展的助推器，可以利用计算机网络快速发布和获取信息，同样在人们的政治生活、经济生活等多个方面发挥着无可比拟的作用。网页设计与计算机网络技术同步发展，也是应用计算机上网的主要依托。而当前计算机网络的受众群体不断壮大，人们依赖对计算机网络的使用使得网页设计的重要性更为突出。因此，做好网页设计是利民的事业，而仅以对CSS技术在网页设计...
html+css网页设计作业.zip
07-20
页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。 菜单美观、醒目，二级菜单可正常弹出与跳转。 要有JS特效，如定时切换和手动切换图片轮播。 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。 ...
html+css网页设计源代码
11-07
这是一个div+css布局方式设计的一个完整的网站源代码，可用于教学或自学。
HTML+CSS网页设计与布局从入门到精通
03-18
《HTML+CSS网页设计与布局从入门到精通》紧密围绕网页设计师在制作网页过程中的实际需要和应该掌握的技术，全面介绍了使用HTML和CSS进行网页设计和制作的各方面内容和技巧。 《HTML+CSS网页设计与布局从入门到精通》...
htm+css网页设计课程作业
12-16
这是我自己做的HTML期末大作业html+css+div二十个页面以上，花了很多时间，不用修改就可以作为自己的作业，也可以作为学习参考html静态网页，里面包含两个html+css+div的代码原件
css网页设计.pdf
06-20
CSS（层叠样式表）在网页设计中扮演着至关重要的角色。它用于描述HTML或XML（包括如SVG、MathML等衍生技术）文档的样式。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 以下是...
CSS新手入门笔记【导入方法、选择器介绍、选择器优先级、属性详细介绍、盒子模型】
最新发布
m0_73940426的博客
06-20 1125
CSS（Cascading Style Sheets，层叠样式表）是网页设计的核心语言之一，它赋予了网页色彩、布局与动态效果，使得网页不仅具有功能性，更富有艺术美感。本文旨在深入浅出地介绍CSS的基础概念、核心特性和进阶技巧，帮助你从零开始，逐步成长为CSS领域的高手。
css系列：音频播放效果-波纹律动
zkx529的博客
06-12 610
音频律动效果，实现了语音播放时的带有动画的特殊样式的进度条
CSS id选择器
m0_73614626的博客
06-11 620
选择器类似，那么它们的区别是什么呢？一般情况下，都推荐使用类选择器。选择器与我们上一关中学习的类选择器类似，但在使用上有不同。选择器的方式完成页面菜单栏样式布局，栏目导航等任务。使用类选择器时，指定一个元素属于某类，使用的是关键字。文档中，可以为任意多个元素指定类，但。选择器在页面中定义锚，在编写。对于上面类选择器的例子，用。中想要应用类样式的元素，指定。它们最大的区别在于，在一个。选择器时，使用的是关键字。然后，书写相应类的样式。选择器只能使用一次，一个。在样式表中，指定对应。同理，我们可以看出，
CSS-0_1 CSS和层叠（样式优先级、内联样式、选择器 & 用户代理样式）
乡亲们啊的博客
06-17 957
CSS 的本质就是声明规则。但是当规则层叠在一起时，最终哪个会生效呢？ 层叠，选择器，内联，关键字 的 样式表
css网页设计代码作业
07-23
CSS网页设计代码作业是一种综合性的任务，要求运用所学的CSS知识来设计和构建一个网页。这个任务通常由一系列的要求组成，如布局设计、样式设置等等。 在这个任务中，首先需要进行页面的布局设计。可以使用CSS的盒...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

云上成理

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值