实践任务:项目介绍与项目准备+制作网页头部和导航+制作banner和最新更新栏目+制作苹果之家栏目+制作底部版权区域与CSS代码优化+制作Apple独家栏目

简介: 实践任务:项目介绍与项目准备+制作网页头部和导航+制作banner和最新更新栏目+制作苹果之家栏目+制作底部版权区域与CSS代码优化+制作Apple独家栏目

任务一:

任务1:建立站点并完成页面整体布局

任务2:制作网页头部和导航

任务3:制作banner和最新更新栏目

任务4:制作苹果之家栏目

任务5:制作Apple独家栏目

任务6:制作底部版权区域与CSS代码优化

注:代码统一并在本文章末尾展示

任务二:

本任务要求制作苹果官方网站的头部和导航部分,效果如图所示:

注:分析苹果官方网站的头部效果,网页的头部分为上下两行。第一行通栏显示,其内容居中显示,内部包含欢迎词和菜单两个模块,第二行内容是也居中显示,内 部包含logo和搜索框两模块,logo中包含图片、标题和文本;搜索框模块中包含一个 单行文本框和一个按钮。

任务三:

制作banner和最新更新栏目,效果如图:

由此分析思路展示为:

任务四:

本任务制作苹果官方网站的苹果之家栏目,效果如图所示:

作相关任务分析为:

任务五:

本任务要求制作苹果官方网站的Apple独家栏目,效果如图示:

任务分析如图:

任务六:

制作底部版权区域与CSS代码优化:

CSS代码优化的意义:

1、可以减少占用网页字节,在同等条件下缩短浏览器下载CSS 代码时间,相当于加快网页打开速度。

2、简化和标准化CSS代码让CSS代码减少,也便于日后维护。

3、使自己的CSS代码更加专业。

CSS代码优化的方法:

1、缩写CSS代码 在CSS代码中margin、padding、font、border等属性均可以用一行来代替很多行设置。

2、当多个元素属性相同时,可以同时设定多个元素的属性

3、尽可能多地重用CSS代码,尽可能少地增加新代码

4、删除空白和换行是将网站正式发布前的操作。对于脱离了开发阶段,要应用在网络上的CSS 而言,删除空白和换行可以减少CSS占用网页字节。

源代码:

1.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>

    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/index.css" />
  </head>
  <body>
    <header>
      <div class="top">
        <div class="box">
          <div class="welcome">
            <div class="topnav">欢迎访问Apple官网!</div>
            <div class="topnav">
              <ul>
                <li><a href="#">手机版</a></li>
                <li><a href="#">收藏本站</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="logo-search box">
          <div class="logo">
            <img src="../img/苹果logo.jpg" alt="Apple官网" />
            <h2>Apple官网</h2>
            <p>在线选购,享受免费送货、Specialist 专家支持、免息分期等服务。</p>
          </div>
          <div class="search">
            <form>
              <input type="text" placeholder="请输入产品关键词" class="input_text" />
              <input type="submit" value="检索" class="input_submit" />
            </form>
          </div>
        </div>
      </div>
    </header>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">商店</a></li>
        <li><a href="#">Mac</a></li>
        <li><a href="#">iPad</a></li>
        <li><a href="#">iPhone</a></li>
        <li><a href="#">Watch</a></li>
        <li><a href="#">Apple配件</a></li>
        <li><a href="#">技术支持</a></li>
      </ul>
    </nav>
    <main>
      <section class="rowone box">
        <div class="banner">
          <img src="../img/14pro1.PNG" />
          <div>"IPhone14":IPhone的巅峰之作</div>
          <ul class="bt">
            <li class="current"></li>
            <li></li>
            <li></li>
          </ul>

        </div>
        <div class="news">
          <h2><span>新品发布</span><a href="#">"IPhone14"IPhone的巅峰之作</a></h2>
          <p>iPhone 14搭载苹果A15六核处理器,后置摄像头为1200万像素主镜头+1200 万像素超广角镜头,前置摄像头为1200万像素,支持光像引擎、深度融合技术、智能HDR4、人像模式等功能。
          </p>
          <ul>
            <li><a href="">苹果测试全新M芯片Mac Pro:性能可达M2 Max四倍<span></span></a></li>
            <li><a href="">苹果首席产品设计师将于2023年离职<span></span></a></li>
            <li><a href="">iPhone15 Ultra最新消息动态:将采用钛金属外壳<span></span></a></li>
            <li><a href="">iPad已经告别了Lightning,iPhone还会远吗?<span></span></a></li>
            <li><a href="">2007款未拆封激活的初代iPhone,于日前LCG(伦敦资本集团)拍卖成功<span></span></a></li>
          </ul>
        </div>
      </section>
      <section class="rowtwo box">
        <div class="tit">
          <h2>苹果之家</h2>
          <a href="#">更多产品</a>
        </div>
        <div class="rowtwoL">
          <img src="../img/大尺寸苹果.jpeg" />
          <h3>美国高科技公司</h3>
          <p>Apple Inc是美国高科技公司,由乔布斯、韦恩等人于1976年4月1日创立为美国苹果电脑公司,2007年1月9日更名苹果公司,总部位于加利福尼亚州的库比蒂诺。</p>
          <a href="#">点击查看</a>
        </div>
        <div class="rowtwoR">
          <ul>
            <li><a href="#">
                <span><b>08</b>2022-09</span>
                <h3>iPhone14Pro实力出圈</h3>
                <p>灵动iPhone新玩法,全新登场的灵动岛功能,为拯救生命而设计,尽显 Apple 创新本色。</p>
              </a></li>
            <li><a href="#">
                <span><b>07</b>2022-06</span>
                <h3>MacBook Air别看轻,别轻看。</h3>
                <p>超薄进化新形态M2芯片强势驱动,从午夜到星光,四色同辉,为地球设想的设计。</p>
              </a></li>
            <li><a href="#">
                <span><b>26</b>2022-10</span>
                <h3>iPad可圈可点可画心</h3>
                <p>全面屏,色调鲜明。论做事,身手利落。搞创作,活灵活现。动笔记、打个字,动呲打呲。</p>
              </a></li>
            <li><a href="#">
                <span><b>08</b>2022-09</span>
                <h3>AirPods Pro重塑新声</h3>
                <p>H2 芯片,沉浸感拉满。惊人的科技,静悄悄,超高水平操控力,调音以你为准。</p>
              </a></li>
            <li><a href="#">
                  <span><b>08</b>2022-09</span>
                  <h3>Watch越野越心驰</h3>
                  <p>先锋工艺开新路。强硬坚固,不止肉眼可见。指南针,新装上阵。大海里,开辟新大陆。</p>
                </a></li>
            <li><a href="#">
                <span><b>01</b>2021-11</span>
                <h3>HomePod mini智能家居的进阶之门。</h3>
                <p>声音底气十足,有头脑的助理,智能家居的管家,iPhone 的默契拍档,隐私安全的保镖。</p>
              </a></li>
          </ul>
        </div>
      </section>
      <section class="rowthree box">
        <div class="tit">
          <h2>Apple独家</h2>
          <a href="#">更多产品</a>


        </div>
        <div class="rowthreeL">
          <a href="#"><img src="../img/14pro1.PNG"/><span>iPhone</span></a>
        </div>
        <div class="rowthreeR">

          <ul>
            <li><a href="#"><img src="../img/mac.jpg" alt="#" width="220"
                  height="170" /><span>Mac</span></a></li>
            <li><a href="#"><img src="../img/ipad.png" alt="#" width="200"
                  height="200" /><span>iPad</span></a></li>
            <li><a href="#"><img src="../img/airpods.jpg" alt="#" width="200"
                  height="200" /><span>Airpods</span></a></li>
            <li><a href="#"><img src="../img/watch.png" alt="#" width="200"
                  height="179" /><span>Watch</span></a></li>
            <li><a href="#"><img src="../img/macstudio.jpg" alt="#" width="200"
                  height="180" /><span>Macstudio</span></a></li>
            <li><a href="#"><img src="../img/homepodmini.png" alt="#" width="200"
                  height="200" /><span>Homepodmini</span></a></li>

          </ul>
        </div>
      </section>
    </main>
    <footer>
      <ul>
        <li><a href="#">Mac</a></li>
        <li><a href="#">iPad</a></li>
        <li><a href="#">Airpods</a></li>
        <li><a href="#">Watch</a></li>
        <li><a href="#">Macstudio</a></li>
        <li><a href="#">Homepodmini</a></li>
      </ul>
      <div class="copyright">
        <p>Copyright&copy;2020-2024 Apple官网 版权所有</p>
        <p>声明:本网站文章图片均来源于网络转载,如有侵犯版权权益,请告知我们并予以删除</p>
      </div>
    </footer>
  </body>
</html>

style.css


* {
  padding: 0;
  margin: 0;
}

body {
  font: 14px "华文细黑";
  background-color: #f6f6f6;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: #000000;
}

a:hover {
  color: #B40404;
}
.box {
  width: 1170px;
  margin: auto;
}

.welcome {
  float: left;
}

.topnav {
  float: right;
}

.topnav li {
  float: left;
}

.topnav li a {
  display: block;
  color: #000000;
  padding: 0 10px;
}

.logo-search {
  padding: 5px 0;
}

.logo-search::after {
  display: block;
  content: "";
  clear: both;
}

.logo {
  float: left;
  width: 500px;
}

.logo img {
  width: 120px;
  float: left;
  margin-right: 10px;
}

.logo h2 {
  font-size: 24px;
  color: #840404;
  margin-top: 15px;
}

.logo p {
  margin-top: 4px;
  color: #000000;
  8181
}

.search {
  float: right;
  margin-top: 26px;
}

.search input.input_text {
  border: 0;
  line-height: 36px;
  height: 36px;
  width: 300px;
  background: #f3f3f3;
  float: left;
  text-indent: 1em;
}

.search input.input_submit {
  border: 0;
  background-color: #B40404;
  color: #ffffff;
  line-height: 36px;
  font-size: 15px;
  width: 100px;
  cursor: pointer;
  letter-spacing: 10px;
}

/*导航样式*/
nav {
  width: 100%;
  height: 50px;
  background-color: #840404;
  margin-bottom: 20px;
}

nav ul {
  width: 1170px;
  margin: 0 auto;
}

nav li {
  float: left;
}

nav li a {
  display: block;
  line-height: 50px;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 500;
  padding: 0 48px;
}

nav li a:hover {
  background-color: #ff6600;
}
/*底部样式*/
footer{
  padding-top: 30px;
  margin-top: 20px;
  background-color: #333;
  border-top: solid 5px #ff6600;
}
footer ul{
  width: 665px;
  height: 40px;
  margin: auto;
}
footer ul li{
  width: 110px;
  float: left;
  text-align: center;
  border-right: 1px solid #d8d8d8;
}
footer li:last-child{border-right: none;}
footer ul li a{
  color: #fff;
}
.copyright{
  text-align: center;
  color: #fff;
  padding-bottom: 30px;
}

index.css

/*rowone部分样式*/
.rowone{
  background: #ffffff;
  border: 1px solid #eee;
  padding: 20px;
  margin-bottom: 20px;
}
.rowone::after{
  content: "";
  display: block;
  clear: both;
}
.banner{
  width: 680px;
  float: left;
  position: relative;
}
.banner img{
  width: 500px;
  height: 500px;
  display: block;
}
.banner div{
  width: 660px;
  height: 33px;
  line-height: 33px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  position: absolute;
  bottom: 0;
  padding-left: 20px;
}
.bt{
  position: absolute;
  bottom: 10px;
  right: 30px;
}
.bt li{
  width: 8px;
  height: 8px;
  background-color: #ffffff;
  border-radius: 50%;
  float: left;
  margin-left: 10px;
}
li.current{
  background-color: #ff6600;
}
.news{
  width: 430px;
  float: right;
}
.news h2{
  margin-bottom: 15px;
}
.news h2 span{
  float: left;
  font-size: 12px;
  border: #ff6600 1px solid;
  padding: 0 5px;
  border-radius: 3px;
  color: #ff6600;
  margin: 5px 8px 0 0;
}
.news p{
  line-height: 25px;
  height: 50px;
  text-align: justify;
  margin-bottom: 10px;
  color: #888;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.news ul{
  border-top: #ddd 1px solid;
  padding-top: 10px;
}
.news ul li{
  font-size: 15px;
  line-height: 35px;
  list-style: square inside;
}
.news ul li span{
  float: right;
}
/*rowtwo部分样式*/
.rowtwo{
  background-color: #ffffff;
  border: 1px solid #eee;
  padding: 20px;
  margin-bottom: 20px;
}
.rowtwo::after{
  display: block;
  content: "";
  clear:both;
}
.tit{
  height: 30px;
  border-bottom:#dddddd solid 1px;
  color: #b40404;
  margin-bottom: 20px;
}
.tit h2{
  width: 100px;
  line-height: 28px;
  float: left;
  text-align: center;
  color: #b40404;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 2px solid #b40404;
}
.tit a{
  float: right;
}
.rowtwoL{
  width: 340px;
  float: left;
}
.rowtwoL img{
  width: 340px;
  height: 160px;
}
.rowtwo h3{
  color: #b40404;
  font-size: 16px;
  margin: 10px 0;
}
.rowtwoL p{
  font-size: 14px;
  color: #888;
  line-height: 25px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:3 ;
  overflow: hidden;
}
.rowtwoL a{
  display: block;
  margin: 16px auto;
  border: 1px solid #ddd;
  color: #999;
  letter-spacing: 2px;
  border-radius: 2px;
  line-height: 45px;
  text-align: center;
}
.rowtwoL a:hover{
  background-color: #b40404;
  color: #ffffff;
}
.rowtwoR{
  width:830px;
  float: left;
}
.rowtwoR ul li{
  width: 365px;
  float: left;
  margin-bottom: 20px;
  border: #ddd 1px solid;
  padding: 15px;
  margin-left: 15px;
}
.rowtwoR ul li span{
  width: 70px;
  height: 70px;
  font-size: 12px;
  text-align: center;
  background: #ababab;
  color: #fff;
  float: left;
  margin-right: 10px;
}
.rowtwoR ul li span b{
  display: block;
  font-size: 16px;
  margin-top: 16px;
}
.rowtwoR ul li h3{
  font-weight: normal;
}
.rowtwoR ul li p{
  font-size: 14px;
  color: #888;
  line-height: 20px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.rowtwoR ul li a:hover span{
  background-color: #b40404;
  color:#ffffff;
}
.rowtwoR ul li a:hover h3{
  color: #b40404;
}
/*rowthree部分样式*/
.rowthree{
  background-color: #ffffff;
  border: 1px solid #eee;
  padding: 20px;
  margin-bottom: 20px;
}
.rowthree::after{
  display: block;
  content: "";
  clear: both;
}
.rowthreeL{
  width: 430px;
  float: left;
}
.rowthreeL img{
  width: 400px;
  height: 400px;
}
.rowthreeL span{
  display: block;
  width: 430px;
  line-height: 30px;
  text-align: center;
  
}
.rowthreeR{
  width: 740px;
  float: left;
}
.rowthreeR li{
  width: 220px;
  float: left;
  margin-left: 20px;
}
.rowthreeR li span{
  display: block;
  width: 220px;
  line-height: 30px;
  text-align: center;
}

注:左端img应插入相关图片,相应尺寸可在css代码中作显示修改。如有调试问题可翻阅前篇文章。

完整效果展示:

注:声明:本网站文章图片均来源于网络转载,如有侵犯版权权益,请告知我们并予以删除。


目录
相关文章
|
3天前
|
前端开发 编解码 移动开发
【魅力网页的背后】:CSS基础魔法,从零打造视觉盛宴
【魅力网页的背后】:CSS基础魔法,从零打造视觉盛宴
|
4天前
|
缓存 前端开发 JavaScript
从HTML、CSS以及其他方面介绍一些移动端网页性能优化的策略
【6月更文挑战第14天】本文探讨了移动端网页性能优化的重要性,并提出了HTML、CSS及其他方面的优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件。CSS优化包括简化样式、利用CSS3动画、媒体查询及压缩文件。其他策略涉及图片和字体优化、缓存利用、压缩传输数据、减少HTTP请求及监听网络状态。通过这些方法,可提升网页性能,改善用户体验。
10 1
|
5天前
|
前端开发 JavaScript
js遍历添加栏目类添加css,再点击其它删除css
该文章介绍了使用JavaScript遍历添加和删除CSS类的方法。示例代码展示了如何在点击时为当前元素添加类,同时移除其他元素的类。其中包含两个示例:一是遍历`.radio-group .ckselect`并处理点击事件,二是实现点击`.zu-top-nav-userinfo`显示/隐藏`.peoples`层,并处理文档点击以关闭层。代码适用于网页交互效果的实现。
8 0
|
12天前
|
存储 前端开发 Windows
对于莫名其妙使用smarttomcat上传前端项目失败,上传css等静态资源失败等原因,及解决方法
对于莫名其妙使用smarttomcat上传前端项目失败,上传css等静态资源失败等原因,及解决方法
|
13天前
|
前端开发 JavaScript
保存网页中的css和js文件,网站保存,复制网站不可复制的文字,网站抠图
保存网页中的css和js文件,网站保存,复制网站不可复制的文字,网站抠图
|
20天前
|
存储 移动开发 前端开发
使用HTML5和CSS3构建现代网页:技术详解与实践
【5月更文挑战第28天】本文详细介绍了使用HTML5和CSS3构建现代网页的技术与实践。HTML5新增语义化标签、多媒体支持、本地存储和表单验证等功能,提升了网页开发效率和用户体验。CSS3则带来了更多选择器、盒模型改进、背景与边框样式以及动画过渡效果,使网页设计更具视觉冲击力。通过实例展示了如何结合两者创建结构清晰、交互丰富、响应式的现代网页。
|
27天前
|
缓存 移动开发 JavaScript
WKWebView对网页和js,css,png等资源文件的缓存机制及如何刷新缓存
WKWebView对网页和js,css,png等资源文件的缓存机制及如何刷新缓存
38 1
|
1月前
|
Web App开发 前端开发 JavaScript
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
|
1月前
|
前端开发 JavaScript UED
CSS顶部与JS后写:网页渲染的奥秘
CSS顶部与JS后写:网页渲染的奥秘
|
3天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)