备案控制台
开发者社区 云计算 文章 正文

html+css实战145-banner-版权区域-布局

2022-08-07 71
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： html+css实战145-banner-版权区域-布局 
/* index.css是用来美化首页的 */
* {
    margin: 0;
    padding: 0;
    /* 內减模式 */
    box-sizing: border-box;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
.clearfix:before,.clearfix:after {
    content:"";
    display:table; 
  }
  .clearfix:after {
    clear:both;
  }
body{
    background-color: #f3f5f7;
}
.wrapper{
    width: 1200px;
    margin: 0 auto;
}
.header{
    height: 42px;
    background-color: pink;
    margin: 30px;
}
h1 {
    float: left;
}
/* 导航 */
.nav {
    float: left;
    margin-left: 70px;
    height: 42px;
}
.nav li{
    float: left; 
    margin-right: 26px;
}
.nav li a{
    display: block;
    padding: 0 9px;
    height: 42px;
    line-height: 42px;
}
.nav li a:hover{
    border-bottom: 2px solid #00a4ff;
}
/* 搜索 */
.search {
    float: left;
    margin-left: 59px;
    width: 412px;
    height: 40px;
    border: 1px solid #00a4ff;
}
.search input {
    float: left;
    padding-left: 20px;
    /* 左右加一起的尺寸要小于等于410 */
    width: 360px;
    height: 38px;
    border: 0;
}
/* 控制placeholder的样式 */
.search input::placeholder {
    font-size: 14px;
    color: #bfbfbf;
}
.search button {
    float: left;
    width: 50px;
    height: 40px;
    background-image: url(../images/btn.png);
    border: 0;
}
.user{
    float: right;
    margin-right: 35px;
    height: 42px;
    line-height: 42px;
}
.user img{
    vertical-align: middle;
}
/* 轮播图 */
.banner {
    height: 420px;
    background-color: #1c036c;
}
.banner .wrapper {
    height: 420px;
    background-image: url(../images/banner2.png);
}
.banner .left {
    float: left;
    padding: 0 20px;
    width: 190px;
    height: 420px;
    background-color: rgba(0,0,0, 0.3);
    /* 行高属于控制文字的属性, 能继承 */
    line-height: 44px;
}
.banner .left span{
    float:right;
}
.banner .left a {
    font-size: 14px;
    color: #fff;
}
.banner .left a:hover {
    color: #00b4ff;
}
.banner .right {
    float: right;
    margin-top: 50px;
    width: 228px;
    height: 300px;
    background-color: #fff;
}
.banner .right h2 {
    height: 48px;
    background-color: #9bceea;
    text-align: center;
    line-height: 48px;
    font-size: 18px;
    color: #fff;
}
.banner .right .content {
    padding: 0 18px;
}
.banner .right .content dl {
    padding: 12px 0;
    border-bottom:2px solid #e5e5e5;
}
.banner .right .content dt {
    font-size: 16px;
    color: #4e4e4e;
}
.banner .right .content dd {
    font-size: 14px;
    color: #4e4e4e;
}
.banner .right .more {
    display: block;
    /* margin: 4px 14px 0; */
    margin: 4px auto 0;
    width: 200px;
    height: 40px;
    border: 1px solid #00a4ff;
    font-size: 16px;
    color: #00a4ff;
    font-weight: 700;
    text-align: center;
    line-height: 40px;
}
/* 精品推荐 */
.goods {
    margin-top: 8px;
    padding-left: 34px;
    padding-right: 26px;
    height: 60px;
    background-color: #fff;
    box-shadow: 0px 2px 3px 0px 
    rgba(118, 118, 118, 0.2);
    line-height: 60px;
}
.goods h2 {
    float: left;
    font-size: 16px;
    color: #00a4ff;
    font-weight: 400;
}
.goods ul {
    float: left;
    margin-left: 30px;
}
.goods ul li {
    float: left;
}
.goods li a {
    border-left: 1px solid #bfbfbf;
    padding: 0 30px;
    font-size: 16px;
    color: #050505;
}
.goods .xingqu {
    float: right;
    font-size: 14px;
    color: #00a4ff;
}
/* 精品课程 */
.box {
    margin-top: 35px;
}
.box .title {
    height: 40px;
}
.box .title h2 {
    float: left;
    font-size: 20px;
    color: #494949;
    font-weight: 400;
}
.box .title a {
    float: right;
    margin-right: 30px;
    font-size: 12px;
    color: #a5a5a5;
}
.box .content li {
    float: left;
    margin-right: 15px;
    margin-bottom: 15px;
    width: 228px;
    height: 270px;
    background-color: #fff;
}
.box .content li:nth-child(5n) {
    margin-right: 0;
}
.box .content li h3 {
    padding: 20px;
    font-size: 14px;
    color: #050505;
    font-weight: 400;
}
.box .content li p {
    padding: 0 20px;
    font-size: 12px;
    color: #999;
}
.box .content li span {
    color: #ff7c2d;
}
/* 版权 */
.footer {
    margin-top: 40px;
    padding-top: 30px;
    height: 417px;
    background-color: #fff;
}
.footer .left {
    float: left;
}
.footer .right {
    float: left;
}

index.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-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <div class="header wrapper">
      <h1>
        <a><img src="./images/logo.png" /></a>
      </h1>
      <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" placeholder="输入关键词" /><button></button>
      </div>
      <div class="user">
        <img src="./images/user.png" alt="" />
        <span>lilei</span>
      </div>
    </div>
    <div class="banner">
      <div class="wrapper">
        <div class="left">
          <ul>
            <li><a href="#">我是歌谣</a><span>></span></li>
            <li><a href="#">我是歌谣</a><span>></span></li>
            <li><a href="#">我是歌谣</a><span>></span></li>
            <li><a href="#">我是歌谣</a><span>></span></li>
            <li><a href="#">我是歌谣</a><span>></span></li>
            <li><a href="#">我是歌谣</a><span>></span></li>
            <li><a href="#">我是歌谣</a><span>></span></li>
            <li><a href="#">我是歌谣</a><span>></span></li>
            <li><a href="#">我是歌谣</a><span>></span></li>
          </ul>
        </div>
        <div class="right">
          <h2>我是歌谣</h2>
          <div class="content">
            <dl>
              <dt>继续学习 程序语言设计</dt>
              <dd>正在学习-使用对象</dd>
            </dl>
            <dl>
              <dt>继续学习 程序语言设计</dt>
              <dd>正在学习-使用对象</dd>
            </dl>
            <dl>
              <dt>继续学习 程序语言设计</dt>
              <dd>正在学习-使用对象</dd>
            </dl>
          </div>
          <a href="#" class="more">全部课程</a>
        </div>
      </div>
    </div>
    <!-- 精品推荐 -->
    <div class="goods wrapper">
      <h2>精品推荐</h2>
      <ul>
        <li><a href="#">jQuery</a></li>
        <li><a href="#">jQuery</a></li>
        <li><a href="#">jQuery</a></li>
        <li><a href="#">jQuery</a></li>
        <li><a href="#">jQuery</a></li>
        <li><a href="#">jQuery</a></li>
      </ul>
      <a href="#" class="xingqu">修改兴趣</a>
    </div>
    <!-- 精品推荐课程 -->
    <div class="box wrapper">
      <div class="title">
        <h2>精品推荐</h2>
        <a href="#">查看全部</a>
      </div>
      <div class="content clearfix">
        <ul>
          <li>
            <a href="#">
              <img src="./images/course07.png" alt="" />
              <h3>Think PHP 5.0 博客系统实战项目演练</h3>
              <p><span>高级</span> • 1125人在学习</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/course07.png" alt="" />
              <h3>Think PHP 5.0 博客系统实战项目演练</h3>
              <p><span>高级</span> • 1125人在学习</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/course07.png" alt="" />
              <h3>Think PHP 5.0 博客系统实战项目演练</h3>
              <p><span>高级</span> • 1125人在学习</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/course07.png" alt="" />
              <h3>Think PHP 5.0 博客系统实战项目演练</h3>
              <p><span>高级</span> • 1125人在学习</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/course07.png" alt="" />
              <h3>Think PHP 5.0 博客系统实战项目演练</h3>
              <p><span>高级</span> • 1125人在学习</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/course07.png" alt="" />
              <h3>Think PHP 5.0 博客系统实战项目演练</h3>
              <p><span>高级</span> • 1125人在学习</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/course07.png" alt="" />
              <h3>Think PHP 5.0 博客系统实战项目演练</h3>
              <p><span>高级</span> • 1125人在学习</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/course07.png" alt="" />
              <h3>Think PHP 5.0 博客系统实战项目演练</h3>
              <p><span>高级</span> • 1125人在学习</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/course07.png" alt="" />
              <h3>Think PHP 5.0 博客系统实战项目演练</h3>
              <p><span>高级</span> • 1125人在学习</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/course07.png" alt="" />
              <h3>Think PHP 5.0 博客系统实战项目演练</h3>
              <p><span>高级</span> • 1125人在学习</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/course07.png" alt="" />
              <h3>Think PHP 5.0 博客系统实战项目演练</h3>
              <p><span>高级</span> • 1125人在学习</p>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="footer">
      <div class="wrapper">
        <div class="left">111</div>
        <div class="right">222</div>
      </div>
    </div>
  </body>
</html>

image.png

关键词：
CSS布局
HTML实战
HTML CSS
CSS html
CSS实战布局
前端歌谣
目录
相关文章
疯狂的猿
|
3天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果，就像一些小颗粒从进度条上散落下来
疯狂的猿
19 0
HTML5/CSS3粒子效果进度条代码
算精通
|
3天前
|
移动开发 前端开发 JavaScript
：掌握移动端开发：HTML5 与 CSS3 的高效实践
：掌握移动端开发：HTML5 与 CSS3 的高效实践 “【5月更文挑战第6天】”
算精通
27 1
桃李春风一杯酒
|
3天前
|
缓存 移动开发 前端开发
【专栏：HTML与CSS前端技术趋势篇】HTML与CSS在PWA（Progressive Web Apps）中的应用
【4月更文挑战第30天】PWA（Progressive Web Apps）结合现代Web技术，提供接近原生应用的体验。HTML在PWA中构建页面结构和内容，响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作，保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步，HTML与CSS在PWA中的应用将更广泛。
桃李春风一杯酒
36 10
异步社区
|
移动开发 API HTML5
《HTML5实战》——导读
异步社区
1723 0
桃李春风一杯酒
|
3天前
|
前端开发 JavaScript 开发者
【专栏：HTML与CSS前端技术趋势篇】前端框架（React/Vue/Angular）与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发，通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合，使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展，掌握新工具，提升开发效能。
桃李春风一杯酒
39 11
桃李春风一杯酒
|
3天前
|
前端开发 JavaScript UED
【专栏：HTML 与 CSS 前端技术趋势篇】Web 性能优化：CSS 与 HTML 的未来趋势
【4月更文挑战第30天】本文探讨了CSS和HTML在Web性能优化中的关键作用，包括样式表压缩、选择器优化、DOM操作减少等策略。随着未来趋势发展，CSS模块系统、自定义属性和响应式设计将得到强化，HTML新特性也将支持复杂组件构建。同时，应对浏览器兼容性、代码复杂度和性能功能平衡的挑战是优化过程中的重要任务。通过案例分析和持续创新，我们可以提升Web应用性能，创造更好的用户体验。
桃李春风一杯酒
32 6
桃李春风一杯酒
|
3天前
|
移动开发 前端开发 UED
【专栏：HTML与CSS前端技术趋势篇】渐进式增强与优雅降级在前端开发中的实践
【4月更文挑战第30天】前端开发中的渐进式增强和优雅降级是确保跨浏览器、跨设备良好用户体验的关键策略。渐进式增强是从基础功能开始，逐步增加高级特性，保证所有用户能访问基本内容；而优雅降级则是从完整版本出发，向下兼容，确保低版本浏览器仍能使用基本功能。实践中，遵循HTML5/CSS3规范，使用流式布局和响应式设计，检测浏览器特性，并提供备选方案，都是实现这两种策略的有效方法。选择合适策略优化网站，提升用户体验。
桃李春风一杯酒
31 4
桃李春风一杯酒
|
3天前
|
前端开发 开发者 UED
【专栏：HTML与CSS前端技术趋势篇】网页设计中的CSS Grid与Flexbox之争
【4月更文挑战第30天】本文对比了CSS Grid和Flexbox两种布局工具。Flexbox擅长一维布局，简单易用，适合导航栏和列表；CSS Grid则适用于二维布局，能创建复杂结构，适用于整个页面布局。两者各有优势，在响应式设计中都占有一席之地。随着Web标准发展，它们的结合使用将成为趋势，开发者需掌握两者以应对多样化需求。
桃李春风一杯酒
36 5
桃李春风一杯酒
|
3天前
|
前端开发 JavaScript 搜索推荐
【专栏：HTML 与 CSS 前端技术趋势篇】HTML 与 CSS 在 Web 组件化中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在Web组件化中的应用及其在前端趋势中的重要性。组件化提高了代码复用、维护性和扩展性。HTML提供组件结构，语义化标签增进可读性，支持用户交互；CSS实现样式封装、布局控制和主题定制。案例展示了导航栏、卡片和模态框组件的创建。响应式设计、动态样式、CSS预处理器和Web组件标准等趋势影响HTML/CSS在组件化中的应用。面对兼容性、代码复杂度和性能优化挑战，需采取相应策略。未来，持续发掘HTML和CSS潜力，推动组件化开发创新，提升Web应用体验。
桃李春风一杯酒
23 8
桃李春风一杯酒
|
3天前
|
前端开发 UED
【专栏：HTML与CSS实战项目篇】创建一个具有复杂布局的电商详情页
【4月更文挑战第30天】构建复杂布局的电商详情页涉及页面结构规划、样式设计和交互效果实现。首先规划顶部导航栏、商品图片展示区、商品信息区、用户评价区和相关商品推荐区。在样式设计上，注重色彩搭配、字体选择、布局与间距及图片处理。交互效果包括图片放大、添加到购物车按钮、滚动监听和评论互动，以提升用户体验。实际开发中需考虑跨设备兼容性和用户体验优化。
桃李春风一杯酒
37 5

热门文章

最新文章

  • 1
    【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果（下）
  • 2
    《CSS 简易速速上手小册》第9章：CSS 最佳实践（2024 最新版）
  • 3
    【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果（上）
  • 4
    《CSS 简易速速上手小册》第10章：未来的 CSS（2024 最新版）
  • 5
    《CSS 简易速速上手小册》第7章：CSS 预处理器与框架（2024 最新版）
  • 6
    《CSS 简易速速上手小册》第3章：CSS 响应式设计（2024 最新版）
  • 7
    《CSS 简易速速上手小册》第5章：CSS 动画与过渡（2024 最新版）
  • 8
    【CSS进阶】巧用伪元素before和after制作绚丽效果（上）
  • 9
    【热门话题】PostCSS：现代前端开发中的CSS增强工具
  • 10
    《CSS 简易速速上手小册》第8章：CSS 性能优化和可访问性（2024 最新版）
  • 1
    HTML 链接
    18
  • 2
    HTML 链接语法
    26
  • 3
    请描述如何使用`BeautifulSoup`或其他类似的库来解析 HTML 或 XML 数据。
    31
  • 4
    自适应窗口图片轮播HTML代码
    21
  • 5
    前端框架演进史：从HTML到现代化开发
    43
  • 6
    如何在HTML中添加图像链接
    36
  • 7
    如何在HTML文件中添加超链接
    28
  • 8
    HTML玩转超链接a标签
    31
  • 9
    PHP爬虫技术：利用simple_html_dom库分析汽车之家电动车参数
    31
  • 10
    打造个性化的个人网页：从HTML到个人品牌
    23

    • 相关课程

    更多
  • CSS 快速掌握
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 天猫 HTML5 互动技术实践
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • HTML及前端框架
  • CSS基础教程
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考