区块链技术博客
www.b2bchain.cn

HTML入门08

这篇文章主要介绍了HTML入门08的讲解,通过具体代码实例进行20999 讲解,并且分析了HTML入门08的详细步骤与相关技巧,需要的朋友可以参考下https://www.b2bchain.cn/?p=20999

本文实例讲述了2、树莓派设置连接WiFi,开启VNC等等的讲解。分享给大家供大家参考文章查询地址https://www.b2bchain.cn/7039.html。具体如下:

文章目录

      • 产品形态
        • pc端和移动端的区别
        • 设计稿的尺寸
        • 新增标签
        • 新增的表单元素
        • css3需要增加的私有前缀
        • css3补充:
        • 渐变
        • 径向渐变:默认的形状是椭圆,至少得有两个颜色值。
          • 小案例,晴空
    • 视口
      • 媒体查询
      • 写移动端时需要注意,如果版心写死的话,当宽度小于版心时下方会出现滚动条,解决方法为,在小于版心宽度时,将版心宽度设为100%
      • h1设置字体大小后,上下会有一点空隙,解决方法

产品形态

  • 第一种:pc端和移动端共用一个域名的,比如
    • 华为:https://www.huawei.com/cn/?ic_medium=direct&ic_source=surlent

    • 苹果:https://www.apple.com/cn/?afid=p238%7C11DPVC7K_mtid_18707vxu38484&cid=aos-cn-kwsg-brand

  • 第二种:pc端和移动端用两个域名的,pc端和移动分别做了两套,比如:小米、京东、淘宝,一般域名中带有m的都是移动端。
    • 京东pc:https://www.jd.com/

    • 京东移动: https://m.jd.com/

    • 小米pc:https//www.mi.com/

    • 小米移动:https://m.mi.com/

  • 总结:什么时候共用一套,什么时候用两套?
    • 当结构比较简单的时候,我们可以共用一套。当结构比较复杂我们就可以写两套。

pc端和移动端的区别

  • 事件上的区别:pc端有鼠标,所以会有与鼠标相关的事件:比如点击、滑过等。但是移动端没有鼠标,只有与手指相关的一些事件,比如滑屏,左滑、右滑等事件
  • 浏览器兼容性:pc端需要考虑各个浏览器的兼容性问题,比如:火狐、谷歌、ie等,但是移动端不需要考虑各个浏览器的兼容问题,它的内核就是webkit和谷歌一样。但是移动端需要考虑适配问题,因为各个手机屏幕不一样大,而且机型不同,有时候也会有一定的兼容问题。

设计稿的尺寸

  • 640×1136的宽度(单屏的页面)?参照iphone5手机分辨率:320*2

  • 750×1334的宽度(单屏的页面)?参照iphone6手机分辨率:375*2

  • 414x 736的宽度(单屏的页面)?参照iphone6plus?手机分辨率:414*3

新增标签

  • header 头部 nav导航 footer底部 article文章 aside侧边栏 section区分大模块 figure配图 figcaption配图说明 video视频 audio音乐
 <header>头部</header>     <footer>底部</footer>     <nav>导航</nav>     <article>文章</article>     <aside>侧边栏</aside>     <figure>         <img src="" alt="配图">         <figcaption>配图说明</figcaption>     </figure>     <section>大区域,跟div一样</section>     <mian>主要内容</mian>     <!-- preload:当你打开页面的时候就开始加载资源,如果不写就是点击的时候加载 -->     <video src="212.mp4" controls autoplay loop preload></video>      

兼容性
HTML入门08

<audio controls>  <!-- 会自上而下执行,如果前面执行,后面的就不执行了 -->     <source src=”http://demo.mimvp.com/html5/take_you_fly.ogg” />     <source src=”http://demo.mimvp.com/html5/take_you_fly.mp3″ />     <source src=”http://demo.mimvp.com/html5/take_you_fly.wav” /> </audio> 

新增的表单元素

<h3>新增的h5表单元素</h3>     <!-- 数字 -->     <input type="number">     <!-- 搜索 -->     <input type="search">     <!-- 电话 -->     <input type="tel">     <!-- 颜色 -->     <input type="color">     <!-- 范围 -->     <input type="range">     <!-- 上传文件 -->     <input type="file">     <!-- 日期 -->     <input type="date">     <!-- 邮件 -->     <input type="email"> 

css3需要增加的私有前缀

-webkit-border-radius:50%; //谷歌       -moz-border-radius:50%;    //火狐       -ms-border-radius:50% ;    //ie       -o-border-radius:50%;      //欧朋       border-radius:50% ;    //标准写法 

css3补充:

  • order-radius 也有四个值,顺序也是按照顺时针,border-radius:50%; 圆角 或者那个值写成宽度的一半(前提:宽高一样)
  • box-shadow:
    • 第一个值:阴影水平偏移
    • 第二个值:阴影垂直偏移
    • 第三个值:阴影的模糊度(模糊的距离)
    • 第四个值:阴影的大小
    • 第五个值:颜色
    • 第六个值:默认是outset inset 内阴影
    • 注意:可以写多个阴影,但是要用逗号隔开
box-shadow: 0 0 50px 1px rgb(185, 88, 194) inset,0 0 50px 1px rgb(88, 146, 194); 

渐变

  • 渐变可以分为两种:
    • 线性渐变(Linear Gradients)
    • 径向渐变(Radial Gradients)
  1. 线性渐变 默认是从上到下
.box{   background:linear-gradient(red,green);   background:-webkit-linear-gradient(red,green); } 
  1. 从一个方向到另一个方向(left 、right 、bottom、top)
background:linear-gradient(left,red,green); background:-webkit-linear-gradient(left,red,green);  
  1. 对角的,两个方向可以进行组合,比如下面的就是从左上角到右下角
background:linear-gradient(left top,red,green); background:-webkit-linear-gradient(left top,red,green); 
  1. 还可以是角度
background:linear-gradient(90deg,red,green); background:-webkit-linear-gradient(90deg,red,green); 
  1. 可以来自由分配颜色的占比,用百分号
background: -webkit-linear-gradient(red 50%,black 50%); 

径向渐变:默认的形状是椭圆,至少得有两个颜色值。

形状:ellipse 椭圆(默认),circle(圆)

.box{         width:400px;         height:600px;         margin:0 auto;         background:radial-gradient(circle,red,green);         background:-webkit-gradient(circle,red,green);      } 
小案例,晴空
        body,html{             height: 100%;             overflow: hidden;             background:radial-gradient(200px at right top,red, yellow, gray);             /* 200px 是圆的半径 right top是右上角开始 red是圆心颜色 yellow是外圈颜色  gray是超出范围颜色  */         } 

视口

我们不加视口的时候,模拟移动端,body的宽度默认是980px,并不是手机屏幕的宽度,如果想要把咱们的页面在手机屏幕中显示完全,就会进行缩放,这样的话,里面的文字等就会看不清楚,为了避免这种情况,通常咱们会加视口,让页面的宽度等于手机屏幕的宽度。
在写移动端的时候一定要加上下面的代码,快捷键:meta:vp + tab

<meta name="viewport"           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 

HTML入门08

媒体查询

@media 针对不同媒体类型可以定制不同的样式规则。 例如:你可以针对不同的媒体类型(包括显示器、便携设备、电视机,等等)设置不同的样式规则。 但是这些多媒体类型在很多设备上支持还不够友好。

@media not|only mediatype and (expressions) { CSS 代码...; } 
  • 媒体类型
    HTML入门08
      /* min大于等于  max小于等于 */         @media screen and (max-width:1000px) and (min-width:900px){             div{                 width:200px;                 background-color: blueviolet;             }         /* }         @media screen and (max-width:500px){             div{                 width:100px;                 background-color: brown;             } */ 

写移动端时需要注意,如果版心写死的话,当宽度小于版心时下方会出现滚动条,解决方法为,在小于版心宽度时,将版心宽度设为100%

@media all and (max-width:1080px) {     .md{         width:100%;     }     /* 去除版心造成的下方滚动条效果 */ } 

h1设置字体大小后,上下会有一点空隙,解决方法

h1{ line-height:1; } 

本文转自互联网,侵权联系删除HTML入门08

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » HTML入门08
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们