H5 , Css基础练习

最新推荐文章于 2024-07-10 10:14:49 发布
最新推荐文章于 2024-07-10 10:14:49 发布
阅读量521 收藏 1
点赞数
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ambition_star/article/details/103721789
版权

h5,css基础练习

1.内边距练习padding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>H5</title>
    <style>
        div{
            width:200px;
            height: 200px;
            border: 1px solid red;        #边框线1像素红色
            /* padding:10px  20px 30px 20px; */
            /* 顺序顺时针上右下左 */
            /* padding-top:10px;上边距 */
            /* 左内边距 */
            padding-top: 5px;           #内边距上
            padding-left: 20px;         #左内边距
        }
    </style>    
</head>
<body>
    <div>这是div中的文字</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* div{
            width: 50px;
            height: 60px;
            border: 1px solid rgb(219, 209, 209);
            text-align: center;#    字体居中
            /* padding-bottom: ; */
            /* font-size: 16px; */
            /* padding会作用在元素的大小计算中,padding增大整个元素也会增大,无法实现居中 */
            /* padding-top: 22px; */
            /* 行高等于当前元素高度时 字体在当前元素垂直居中 */
            /* line-height: 60px; */
            
        /* } */
        div{
            width: 32px;
            border: 1px solid red;
            font-size: 16px;
            /* 简化成上右下左 */
            padding: 22px 9px 22px 9px;    #内边距嫖
            /* 再简化 */
            padding: 22px 9px;
        }
    </style>
</head>
<body>
    <div>首页</div>
</body>
</html>

2.外边距margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            /* border:1px solid red; */
            background-color: pink;
            /* 解决外边距溢出是为父边距添加一个盖子,让子元素的外边距能找到作用的点 */
            /* 方法一为辅元素添加上透明框 */
            /* 父元素上边距可能会和溢出的子元素外边距合并无法组织溢出 */
            /* 方法二为父元素添加内边距 */
            /* margin: 10px 20px 30px 40px; */
            border-top:1px solid transparent;

        }
        #d1{
            margin-bottom: 10px;
        }
        #d2{
            margin-top:20px;
        }
    </style>
</head>
<body>
    <div id="d1">
        <p>这是p</p>
    </div>
    <div id="d2"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>inline-margin</title>
    <style>
        span{
            border:1px solid red;
        }
        #s2{
            margin-left: 20px;
        }
        #s1{
            /* margin可以取负值 表示向相反方向移动 */
            margin-left: -10px;
            margin-right: 10px;
        }
        ul{
            /* 取消列表样式 */
            list-style: none
        }
    </style>
</head>
<body>
    <span id="s1">中午吃啥?</span><span id="s2">随便</span>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

3.盒子box

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            /* contnt-box计算方式 */
            /* width: 150px;
            height:150px;
            border: 5px solid red;
            background-color: orange;
            padding:10px;
            margin: 10px; */
            width: 180px;
            height: 180px;
            /* border-box 将内边距和边框一同计算在内容中 */
            /* 同时根据内边距和边框大小调整内容大小 */
            /* 计算方式width/height+margin */
            box-sizing: border-box;
            border: 5px solid red;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

4.拓展练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #s1{
            color: #666;
            
        }
        div{
            width: 0px;
            height: 0px;
            border:8px solid transparent;
            border-top-color:#444;
            display: inline-block;
            margin-bottom: -6px;
        }
    </style>
</head>
<body>
    <span id="s1">
        上海
    </span>
    <div id="s2"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width:180px;
            height: 62px;
            background-color: black;
            border-radius: 30px;
            color: rgb(238, 223, 11);
            font-size: 30px;
            text-align: center;
            line-height: 62px;
        }
        div:hover{
            background-color: red;
            color: aliceblue;
            cursor: pointer;
            transition: all 1s;
        }
    </style>
</head>
<body>
    <div>
            PLUS会员
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        
        .item{
            width:  50px;
            height: 25px;
            margin:0 10px;
            padding: 5px 10px;
            font-size: 8px;
             line-height: 40px;
        }
        .item:hover{
            border-radius: 5px;
            background-color: rgb(255, 0, 0);
            color: aliceblue;
            transition: all 0.5s;
            cursor: pointer;
        }
        div{
            width: 80%;
            height: 40px;
            border:  1px solid rgb(114, 109, 109);
           
        }
        #s1{
            color: rgb(73, 75, 61);
        }
    </style>
</head>
<body>
    <div>
        <span id="s1" class="item">难度:</span>
        <span class="item">全部</span>
        <span class="item">初级</span>
        <span class="item">中级</span>
        <span class="item">高级</span>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>练习4</title>
    <style>
        .banner{
                width: 200px;
                height: 200px;
                border: 1px solid red;
                text-align: center;
                /* 水平居中上下不调整左右自动 */
                margin: 0 auto;
        }
        #d1{
            margin-left: -166px; 
            background-color: red;
            color: white;
        }    
        
        .d2{
            display: block;
            margin-left: -75px;
            font-size:20px;
            
        }
        #d3{
            display: block;
            margin-left:-37px;
            color: rgb(121, 117, 117);
        }
        #img1{
            margin-top:20px;
        }
    </style>
</head>
<body>
    
    <div class="banner">
        <span id="d1">低价</span>
        <span class="d2"><b>母婴馆</b></span>
        <span id="d3">秒杀低至一元</span>
        <img src="/home/tarena/桌面/1906/html/day04/exer/imgs/img01-2-3.png" alt="图片加载失败" id="img1">
    </div>   
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>练习5</title>
    <style>
        #d{
            width: 187px;
            height: 242px;
            border: 1px solid rgb(185, 172, 172);
            margin: 0 auto;
            text-align: center;
            
            
        }
        #d1{
            font-size: 40 px;
            margin-left:-150px;
        }
        #ig1{
            margin-top: 20px;
        }
        #d2{
            margin-top: 20px;
        }
        #d3{
            margin-top: 20px;
            color: rgb(117, 106, 106);
        }
        #d:hover{
            width: 187px;
            height: 242px;
            border: 1px solid rgb(185, 172, 172);
            margin: 0 auto;
            margin-top: -5px;
            text-align: center;
            cursor: pointer;
            box-shadow: 10px 10px 15px 0;
            
        }
    </style>
</head>
<body>
    <div id="d">
        <div id="d1"><b>众筹</b></div>
        <img src="/home/tarena/桌面/1906/html/day04/exer/imgs/img01.png" alt="图片加载失败" id="ig1">
        <div id="d2"><b>苹果I-Watch呼吸表带</b></div>
        <div id="d3">一场手腕的呼吸</div>
    </div>
</body>
</html>
ambition_star
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML上机练习1
qq_36074043的博客
10-16 1151
百度音乐标签页面 .text { font-size: 36px; font-weight: bold; } .wsy { font-weight: bold; color: #C00; } .sll { font-family: "宋体"; font-size: 12px; } .lb { font-family: "宋体"; font-size: 12px; line-he
HTML+CSS 静态页面练习
smilingSML的博客
09-23 79
效果图是以下，没有用图标引入，做的潦草了一点，重复代码也有很多，暂时没达到节约代码的水平。
h5+css3 小练习
11-30
H5是指第5代HTML，也指用H5语言制作的一切数字产品。所谓HTML是“超文本标记语言”的英文缩写。我们上网所看到网页，多数都是由HTML写成的。“超文本”是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。而“标记”指的是这些超文本必须由包含属性的开头与结尾标志来标记。浏览器通过解码HTML，就可以把网页内容显示出来，它也构成了互联网兴起的基础。
【面试系列】=＞HTML CSS
Write less，do more
11-27 242
1, HTML5中新增了哪些内容？ 广义上的html5指的是最新一代前端开发技术的总称，包括html5，CSS3，新增的webAPI。 Html中新增了header,footer,main,nav等语义化标签，新增了video,audio媒体标签，新增了canvas画布。新增了一些标签属性，例如input的placeholder。 Css3中新增了：圆角，阴影，滤镜，vwvh单位，flex布局，媒体查询，过度和动画，伪类。 webAPI,新增了localStorage和sessionStorage，quer
HTML5基础练习
咦唔喻iuv的博客
03-18 261
【代码】HTML5基础练习。
h5+css 实现简易商城首页
12-06
总结，"h5+css 实现简易商城首页"是一个很好的实践项目，它涵盖了HTML5的基础标签应用和CSS的布局与样式设计，帮助开发者熟悉前端网页的基本构造和视觉呈现。通过完成这样的练习，开发者可以进一步提升其在网页设计...
网页设计期末大作业，纯H5和CSS实现静态仿京东网页.zip
06-04
这个"网页设计期末大作业，纯H5和CSS实现静态仿京东网页.zip"文件，显然是一份使用HTML5（H5）和CSS技术来模仿京东网站前端界面的学生作品。下面，我们将深入探讨HTML5和CSS在网页设计中的应用，以及如何通过它们来...
H5手机端练习小游戏.zip
04-20
本压缩包"**H5手机端练习小游戏.zip**"提供了一系列适合新手学习H5开发的小游戏源码，旨在帮助初学者掌握前端开发的基本技能。这些小游戏包括“大力射手”、“点击夜空欣赏烟花”、“岛国么么哒”、“冰桶大战”、...
html,css,js,h5,css3基础语法案例代码
03-06
HTML（HyperText Markup ...在实际练习中，可以从简单的页面布局开始，逐渐尝试更复杂的特效和交互，逐步提升技能水平。这些案例代码就是很好的学习资源，新手可以通过模仿和实践，加深对这些技术的理解和运用。
【H5】网页入门练习
weixin_44760675的博客
09-23 212
<!DOCTYPE html> <html> <head> <meta cahrset=utf-8""/> <title>入门练习项目</title> </head> <body> <h1>论&nbsp;&nbsp;&nbsp;&nbsp;数&nbsp;&nbsp;&nbsp;学的重要性</h1> <!--
html+css+js新手练习项目
10-08
html+css+js新手练习项目，里面包含例子源码，还有单独文件夹分类。适合新手练习用
H5阶段考题汇总
03-23
HTML5及CSS3常见考题汇总，如果你独自完成到这里，只要完成80%，你的HTML5,CSS3原生基础已经相当扎实，你也被大象蹂躏，磨炼成了优秀的人。
H5拖拽的练习详解
lhy010831的博客
07-20 740
h5拖拽的练习以及详情
h5测试
weixin_40512519的博客
10-05 674
&lt;input type="search"/&gt;当点击输入框中的"x"时，输入框中的内容会被删除。 &lt;meter&gt;&lt;/meter&gt; &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;p&gt;显示度量值：&lt;/p&gt; &lt;me
h5和css3基础知识总结
JiangJinXing613的博客
08-13 1201
这个星期在前端这一块，发现自己学的并不是很好，知其然不知其所以然，所以在网上查阅了一些基础知识记录在自己的博客上。 表单： 表单元素（标签）   数据列表（input下的下拉菜单）  与input 配合使用      男  女  不详   表示度量器，不建议用作进度条 进度条 表单属性： placeholder 占位符，autofocus 获取焦点，autocom
Html5+CSS3基础知识汇总-CSS3篇
qq_27348951的博客
11-28 5820
今天总结的是CSS3的学习内容，CSS3的简介、CSS3中新增的样式以及新增样式具体属性的实现。
H5学习练习——多媒体（音频视频）
weixin_44089544的博客
04-03 215
H5学习练习——多媒体（音频视频） 常用方法:load()、play()、pause() 常用属性:currentSrc、currentTime、duration 常用事件:oncanplay， ontimeupdate，onended 等 具体地址:参考文档 <!DOCTYPE html> <html lang="en"> <head> <m...
H5学习练习——拖放
weixin_44089544的博客
04-03 377
拖放概念： 拖放是HTML5标准的一部分，任何元素都能够拖放。 操作：拖拽：Drag、 释放：Drop 注意：拖拽指的是鼠标点击源对象后一直移动对象不松手，一但松手即释放了 拖放使用： 设置元素为可拖放：draggable 属性：标签元素要设置draggable=true，否则不会有效果 （注意：链接和图片默认是可拖动的，不需要 draggable 属性。） 常用API： 被拖动的源对象可以...
scss概念及使用
最新发布
m0_74293254的博客
07-10 798
/ 样式规则使用参数在上面的例子中，@mixin 关键字定义了一个名为 mixin-name 的混合，可以接受多个参数（如果需要的话），并在其中定义一组样式规则。SCSS 的三种循环结构 @for、@each 和 @while 分别用于按照索引循环、遍历列表或 map 类型数据、以及根据条件循环生成样式。这些循环结构使得 SCSS 更加强大和灵活，能够根据需求生成复杂的 CSS 规则。在 SCSS 中，可以使用自定义函数来增强样式表的功能，这些函数可以接受参数并返回处理后的值。
h5 css 虚拟展
12-10
h5 css 虚拟展指的是以H5技术和CSS样式来创建虚拟展览的一种方式。通过利用HTML5的优势和CSS的样式美化，可以实现虚拟展览的全程可视化呈现。 首先，H5技术是HTML5的简称，是一种用于构建和呈现网页的标准技术。它具有语义化的标签、多媒体支持、离线缓存等特点，为构建虚拟展提供了良好的支持。 其次，CSS是一种用于控制网页样式和布局的语言。通过CSS样式美化，可以制作出符合展览需求的精美界面和布局效果。CSS样式可以控制字体、颜色、布局、动画效果等，使虚拟展览更具吸引力和互动性。 通过H5技术和CSS样式的结合，可以实现虚拟展览的呈现和互动。在虚拟展览中，我们可以利用H5技术创建展览页面，包括展品介绍、展览导览、参观路线等内容；同时，通过CSS样式美化，可以为虚拟展览设计漂亮的展示效果，包括文字字体、图片边框、背景颜色等。 在虚拟展览中，还可以利用CSS样式实现一些动画效果，提升展览的趣味性和互动性。例如，可以通过CSS的过渡效果实现展品切换时的平滑过渡；还可以利用CSS的动画效果，实现展品的旋转、缩放等动态效果，使虚拟展览更加生动和立体。 总之，H5技术和CSS样式的运用可以让虚拟展览更加生动、吸引人，并提供更好的展示和互动体验。通过这种方式，我们可以在网页上构建出一个虚拟的展览场景，实现线上的参观和交流，扩大展览的受众范围和影响力。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值