登录 注册
开源 企业版 高校版 私有云 Gitee AI NEW
扫描微信二维码支付
取消
支付完成
Watch
不关注 关注所有动态 仅关注版本发行动态 关注但不提醒动态
1 Star 0 Fork 38

崔梦圆 / H5+CSS3教程新版-练习_4

forked from 老胡来也 / H5+CSS3教程新版-练习 
代码 Issues 0 Pull Requests 0 Wiki 统计 流水线
服务
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目，私有仓库也完全免费 ：）
免费加入
克隆/下载
分支 1
标签 0
贡献代码
同步代码
创建 Pull Request
了解更多
对比差异 通过 Pull Request 同步
同步更新到分支
通过 Pull Request 同步
将会在向当前分支创建一个 Pull
Request，合入后将完成同步
取消
提示: 由于 Git 不支持空文件夾，创建文件夹后会生成空的 .keep 文件
02.产品展示素材/imgs
LICENSE
readme.md
Loading...
README
MIT

H5+CSS3教程新版-练习

一、使用无序列表，完成博客园导航栏，效果如下

20230920212619

二、完成如下效果

20230920213158

给定html代码如下：

<div class="product">
    <a href="" target="_blank">
        <img src="../images/kettle.png" alt="电水壶" width="195px">
        <p class="describe">快速煮水，放心饮用</p>
        <div class="product-text">
            <div class="product-mark">
                <img src="../images/live.png" alt="直播中" height="20">
                <img src="../images/odds.png" alt="特惠" height="20">
                <img src="../images/30day.png" alt="30天保价" height="20">
                <img src="../images/server.png" alt="售后免邮" height="20">
            </div>
            <h3>云米电水壶</h3>
            <p>￥59</p>
        </div>
    </a>
</div>

所需图片素材，见02.产品展示素材文件夹

请写出符合最终效果的CSS

三、完成如下效果

20230921222550

给定html代码如下：

<div class="news">
    <h3>百度新闻热榜</h3>
    <ul>
        <li><a href=""><span class="col1">1</span>习近平杭州致辞中的“知识点”</a></li>
        <li><a href=""><span class="col2">2</span>韩国运动员扇对手脸被罚出场</a></li>
        <li><a href=""><span class="col3">3</span>张国伟在亚运会场馆外摊煎饼</a></li>
        <li><a href=""><span class="col4">4</span>四海同赴亚运之约</a></li>
        <li><a href=""><span class="col5">5</span>杭州亚运会首个双冠王诞生</a></li>
        <li><a href=""><span class="col6">6</span>贪官曾在歌舞厅打架子鼓补贴家用</a></li>
        <li><a href=""><span class="col7">7</span>49岁张震岳举行婚礼</a></li>
        <li><a href=""><span class="col8">8</span>开幕式唱歌的四个帅哥是谁</a></li>
    </ul>
</div>

四、分页效果，最终效果如下

20230924162353

自行完成html结构及样式的编写

四、使用CSS3线性渐变，实现如下效果

20230926220523

五、使用CSS3线性渐变，实现如下效果

20230926222913

六、选择器练习序列题

  1. 选择所有的plate，结构如下：
<div class="table">
    <plate />
    <plate />
</div>
  1. 选择所有的bento，结构如下：
<div class="table">
    <bento />
    <plate />
    <bento />
</div>
  1. 选择id为fancy的plate，结构如下：
<div class="table">
    <plate id="fancy" />
    <plate />
    <bento />
</div>
  1. 选择plate里面的apple，结构如下：
<div class="table">
    <bento />
    <plate>
        <apple />
    </plate>
    <apple />
</div>
  1. 选择id为fancy的plate中的pickle，结构如下：
<div class="table">
    <bento>
        <orange />
    </bento>
    <plate id="fancy">
        <pickle />
    </plate>
    <plate>
        <pickle />
    </plate>
</div>
  1. 选择small的apple，结构如下：
<div class="table">
    <apple />
    <apple class="small" />
    <plate>
        <apple class="small" />
    </plate>
    <plate />
</div>
  1. 选择small的orange，结构如下：
<div class="table">
    <apple />
    <apple class="small" />
    <bento>
        <orange class="small" />
    </bento>
    <plate>
        <orange />
    </plate>
    <plate>
        <orange class="small" />
    </plate>
</div>
  1. 选择bento中的small orange，结构如下：
<div class="table">
    <bento>
        <orange />
    </bento>
    <orange class="small" />
    <bento>
        <orange class="small" />
    </bento>
    <bento>
        <apple class="small" />
    </bento>
    <bento>
        <orange class="small" />
    </bento>
</div>
  1. 选择所有的plate和bento，结构如下：
<div class="table">
    <pickle class="small" />
    <pickle />
    <plate>
        <pickle />
    </plate>
    <bento>
        <pickle />
    </bento>
    <plate>
        <pickle />
    </plate>
    <pickle />
    <pickle class="small" />
</div>
  1. 选择所有的物品，结构如下：
<div class="table">
    <apple />
    <plate>
        <orange class="small" />
    </plate>
    <bento />
    <bento>
        <orange />
    </bento>
    <plate id="fancy" />
</div>
  1. 选择plate中的所有东西，结构如下：
<div class="table">
    <plate id="fancy">
        <orange class="small" />
    </plate>
    <plate>
        <pickle />
    </plate>
    <apple class="small" />
    <plate>
        <apple />
    </plate>
</div>
  1. 选择plate的下一个apple，结构如下：
<div class="table">
    <bento>
        <apple class="small" />
    </bento>
    <plate />
    <apple class="small" />
    <plate />
    <apple />
    <apple class="small" />
    <apple class="small" />
</div>
  1. 选择bento后面的所有pickle，结构如下：
<div class="table">
    <pickle />
    <bento>
        <orange class="small" />
    </bento>
    <pickle class="small" />
    <pickle />
    <plate>
        <pickle />
    </plate>
    <plate>
        <pickle class="small" />
    </plate>
</div>
  1. 选择直接在plate中的apple，结构如下：
<div class="table">
    <plate>
        <bento>
            <apple />
        </bento>
    </plate>
    <plate>
        <apple />
    </plate>
    <plate />
    <apple />
    <apple class="small" />
</div>
  1. 选择plate中的第一个orange，结构如下：
<div class="table">
    <bento />
    <plate />
    <plate>
        <orange />
        <orange />
        <orange />
    </plate>
    <pickle class="small" />
</div>
  1. 选择plate中的apple、pickle，结构如下：
<div class="table">
    <plate>
        <apple />
    </plate>
    <plate>
        <pickle />
    </plate>
    <bento>
        <pickle />
    </bento>
    <plate>
        <orange class="small" />
        <orange />
    </plate>
    <pickle class="small" />
</div>
  1. 选择small的apple、pickle ，结构如下：
<div class="table">
    <plate id="fancy">
        <apple class="small" />
    </plate>
    <plate />
    <plate>
        <orange class="small" />
        <orange />
    </plate>
    <pickle class="small" />
</div>
  1. 选择第3个plate，结构如下：
<div class="table">
    <plate />
    <plate />
    <plate />
    <plate id="fancy" />
</div>
  1. 选择第一个bento，结构如下：
<div class="table">
    <plate />
    <bento />
    <plate>
        <orange />
        <orange />
        <orange />
    </plate>
    <bento />
</div>
  1. 选择第一个apple，结构如下：
<div class="table">
    <orange class="small" />
    <apple />
    <apple class="small" />
    <apple />
    <apple class="small" />
    <plate>
        <orange class="small" />
        <orange />
    </plate>
</div>
  1. 选择序号为偶数的plate，结构如下：
<div class="table">
    <plate />
    <plate />
    <plate />
    <plate />
    <plate id="fancy" />
    <plate />
</div>
  1. 选择从第3个plate(包括第3个)开始的每2个plate，结构如下：
<div class="table">
    <plate />
    <plate>
        <pickle class="small" />
    </plate>
    <plate>
        <apple class="small" />
    </plate>
    <plate />
    <plate>
        <apple />
    </plate>
    <plate />
</div>
  1. 选择中间plate中的apple，结构如下：
<div class="table">
    <plate id="fancy">
        <apple class="small" />
        <apple />
    </plate>
    <plate>
        <apple class="small" />
    </plate>
    <plate>
        <pickle />
    </plate>
</div>
  1. 选择最后一个apple、最后一个orange，结构如下：
<div class="table">
    <orange class="small" />
    <orange class="small" />
    <pickle />
    <pickle />
    <apple class="small" />
    <apple class="small" />
</div>
  1. 选择空的bento，结构如下：
<div class="table">
    <bento />
    <bento>
        <pickle class="small" />
    </bento>
    <plate />
    <bento />
</div>
  1. 选择较大的apple，结构如下：
<div class="table">
    <plate id="fancy">
        <apple class="small" />
    </plate>
    <plate>
        <apple />
    </plate>
    <apple />
    <plate>
        <orange class="small" />
    </plate>
    <pickle class="small" />
</div>
  1. 选择有for属性的东西，结构如下：
<div class="table">
    <bento>
        <apple class="small" />
    </bento>
    <apple for="Ethan" />
    <plate for="Alice">
        <pickle />
    </plate>
    <bento for="Clara">
        <orange />
    </bento>
    <pickle />
</div>
  1. 选择有for属性的plate，结构如下：
<div class="table">
    <plate for="Sarah">
        <pickle />
    </plate>
    <plate for="Luke">
        <apple />
    </plate>
    <plate />
        <bento for="Steve">
        <orange />
    </bento>
</div>
  1. 选择属性值为Vitaly的东西，结构如下：
<div class="table">
    <apple for="Alexei" />
    <bento for="Albina">
        <apple />
    </bento>
    <bento for="Vitaly">
        <orange />
    </bento>
    <pickle />
</div>
  1. 选择for属性值以Sa开头的东西，结构如下：
<div class="table">
    <plate for="Sam">
        <pickle />
    </plate>
    <bento for="Sarah">
        <apple class="small" />
    </bento>
    <bento for="Mary">
        <orange />
    </bento>
</div>
  1. 选择for属性值以ato结束的东西，结构如下：
<div class="table">
    <apple class="small" />
    <bento for="Hayato">
        <pickle />
    </bento>
    <apple for="Ryota" />
    <plate for="Minato">
        <orange />
    </plate>
    <pickle class="small" />
</div>
  1. 选择for属性值包含obb的东西，结构如下：
<div class="table">
    <bento for="Robbie">
        <apple />
    </bento>
    <bento for="Timmy">
        <pickle />
    </bento>
    <bento for="Bobby">
        <orange />
    </bento>
</div>

七、样式继承和叠加性序列题

  1. 题1，文字“中华人民共和国”是何种颜色？
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1 .para1 p{
            color:red;
        }
        div div #box3 p{
            color: blue;
        }
        div.para1 div.para2 div.para3 p{
            color: green;
        }
    </style>
</head>
<body>
    <div id="box1" class="para1">
        <div id="box2" class="para2">
            <div id="box3" class="para3">
                <p>中华人民共和国</p>
            </div>
        </div>
    </div>
</body>
</html>
  1. 题2，文字“中华人民共和国”是何种颜色？
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div p {
            color: red;
        }

        #box {
            color: blue;
        }
    </style>
</head>

<body>
    <div id="box">
        <p id="para" class="spec">
            <span>
                中华人民共和国
            </span>
        </p>
    </div>
</body>

</html>
  1. 题3，文字“中华人民共和国”是何种颜色？
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            color: green;
        }
        .nav{
            color: red;
        }
        .nav ul li{
            color: blue;
        }
    </style>
</head>

<body>
    <div class="nav">
        <ul>
            <li>
                <span>中华人民共和国</span>
            </li>
            <li>
                <span>中华人民共和国</span>
            </li>
            <li>
                <span>中华人民共和国</span>
            </li>
            <li>
                <span>中华人民共和国</span>
            </li>
        </ul>
    </div>

</body>

</html>
  1. 题4，文字“中华人民共和国”是何种颜色？

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1 div.spec2 p ,#box1 #box2 p{
            color: blue;
        }
        #box1 #box3 p{
            color: green;
        }
    </style>
</head>

<body>
   <div id="box1" class="spec1">
    <div id="box2" class="spec2">
        <div id="box3" class="spec3">
            <p>中华人民共和国</p>
        </div>
    </div>
   </div>

</body>

</html>
  1. 题5，文字“中华人民共和国”是何种颜色？（面试题）

<div id="father" class="c1">
  <p id="son" class="c2">
    中华人民共和国
  </p>
</div>

<style type="text/css">
  #father #son{  
    color:blue;
  }
  
  #father p.c2{ 
    color:black;
  }
  
  div.c1 p.c2{ 
    color:red;
  } 
  
  #father{
    color:green!important;
  }
</style>
  1. 题6，文字“中华人民共和国”是何种颜色？（面试题）
<style type="text/css">
  #father{ 
    color:red;
  }
  
  p{ 
    color:blue;
  }
</style>

<div id="father">
  <p>
    中华人民共和国
  </p>
</div>
  1. 题7，文字“中华人民共和国”是何种颜色？（面试题）
<div id="box1" class="c1">
  <div id="box2" class="c2">
    <div id="box3" class="c3">
      中华人民共和国
    </div>
  </div>
</div>

<style type="text/css">
  .c1 .c2 div{ 
    color:blue;
  }
  
  div #box3{
    color:green;
  }
  
  #box1 div{
    color:yellow;
  }
</style>

八、盒子模型

  1. 说出下面盒子的真实占用的宽高，并画出盒子模型图

    div{
        width: 200px;
        height: 200px;
        padding: 10px 20px 30px;
        padding-right: 40px;
        border: 1px solid #000;
    }
  1. 说出下面盒子的真实占用的宽高，并画出盒子模型图

	div{
		width: 200px;
		height: 200px;
		padding-left: 10px;
		padding-right: 20px;
		padding:40px 50px 60px;
		padding-bottom: 30px;
		border: 1px solid #000;
	}
  1. 有如下盒子模型图，请写出代码，尝试用最简单的方式

20231007220829

  1. 有如下盒子模型图，请写出代码，尝试用最简单的方式

20231007220940

九、浮动

  1. 使用浮动，实现如下效果，具体数值（宽度、高度、间距等可自行使用snipaste测量，也可参考如上标识的数值，颜色随意）

20231008222820

十、定位

  1. 创建一个在其父级容器中水平、垂直居中的绝对定位元素，如下效果：

20231010111321

  1. 在页面顶部创建一个固定不动的导航条，要求不遮盖下面的内容

20231010112224

  1. 创建一个悬浮在文字下方的提示框,当鼠标经过的时候展示出来，鼠标移开不显示

20231010112742

  1. 使用提供的素材，利用精灵图技术实现如下效果

素材：

20231010113053

效果：

20231010113115

  1. 使用提供的素材，实现如下效果

素材：

20231010221623

20231010221714

文字素材：广东深圳宝安区建安一路海雅缤纷城4楼

效果：

20231010221731

  1. 2014年春招面试题，请按如下图片要求画出相应的示意线

20231011223439

十一、过渡、2D转换、3D转换

  1. 使用提供的素材，实现如下效果

素材：

1

2

3

效果：

gif01

  1. 实现如下效果

效果：

gif02

  1. 实现如下效果-小火箭

素材：

20231017204046

效果：

gif03

  1. 实现如下效果-纸牌

素材：

20231017210305

20231017210408

效果：

gif04

  1. 实现如下效果-品牌

素材：

20231017211318

效果：

gif05

MIT License Copyright (c) 2023 老胡来也 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Starred
0
Star
0
Fork
38

简介

H5+CSS3教程新版-练习，你值得拥有 展开 收起
暂无标签
MIT
使用 MIT 开源许可协议
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/circle-circle123/h5-css3-tutorial-new-version-practice_4.git
git@gitee.com:circle-circle123/h5-css3-tutorial-new-version-practice_4.git
circle-circle123
h5-css3-tutorial-new-version-practice_4
H5+CSS3教程新版-练习_4
master
点此查找更多帮助

搜索帮助

Git 命令在线学习 如何在 Gitee 导入 GitHub 仓库
Git 仓库基础操作
企业版和社区版功能对比
SSH 公钥设置
如何处理代码冲突
仓库体积过大，如何减小？
如何找回被删除的仓库数据
Gitee 产品配额说明
GitHub仓库快速导入Gitee及同步更新
什么是 Release（发行版）
将 PHP 项目自动发布到 packagist.org
评论
仓库举报
回到顶部