第五课:简单的页面结构布局,字体图标和媒体查询

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网

先综合说明一下,再来上代码和效果

页面结构

最常见的页面结构就是上中下也即<header></header><main></main><footer></footer>三项,通过分别的CSS来将整个页面做切隔,显示代码如下:

  1.   <body>
  2.     <header>头部</header>
  3.     <main>主体部分</main>
  4.     <footer>脚部</footer>
  5.   </body>

如果只做一个一屏高度的页面,那问题就来了:头脚高度都可以定,主体部分的高度如何定呢?
这时就用了新学的vh这个长度单位,1VH表示整个可视窗口的1/100,这时这些如下CSS设置

  1. header {
  2.   width: 100vw;
  3.   height: 20vh;
  4.   min-height: 50px;
  5.   background-color: aquamarine;
  6. }
  7. footer {
  8.   width: 100vw;
  9.   height: 10vh;
  10.   background-color: bisque;
  11. }
  12. main {
  13.   background-color: rgb(205, 248, 182);
  14.   height: 70vh;
  15.   outline: 1px solid;
  16. }

这样一来就把整个窗口用完了.

字体图标

所谓的字体图标就是用到的矢量图就和一个文字一样,可以进一步设置他的大小颜色等等,这比单纯的一个固定图片也好用得多.目前国内主要用的是阿里图标.
在使用上,可以将喜欢的图标保存到对应的项目中,生成在线链接,复制对应的代码(注意这个代码里,包含了所有此项目下的图标,使用时需要将整个链接导入到项目上,将对应项目下的每个图标的名称拿过来用到项目中,图片如下

图标导入和使用中,一般会生产一个单独的icon.css文件来管理所有的图标,在对应的html页面上,再导入css做对应处理,代码如下:

  1. <span class="iconfont icon-fasongtijiao fasongtijiao"></span>

html代码中,直接把图标放到span标签中即可(像文字一样),对应的图标名,放置在class样式中,样式中要写3项内容,分别是”iconfont”,”复制过来的图标名称”和”图标名称简写”—-我们在CSS样式中,一般图标名称简写来设计

  1. @import url(http://at.alicdn.com/t/c/font_3957852_atsrkm6th2k.css);
  3. .chazhao,.fasongtijiao{
  4.     font-size: 2rem;
  5.     color: blueviolet;
  6.     margin-top: 0.2em;
  7. }
  9. .fasongtijiao:hover{
  10.     /* font-size: 2rem; */
  11.     color: red;
  12.     cursor: pointer;
  13. }

注意导入时,对应的地址为http://*链接
*通过上面的操作,就实现了阿里图标在自己项目中的使用

媒体查询

一般使用上,媒体查询也会单独作为一个CSS引入,为的了针对不同宽度的终端来做针对性的显示,包括元素是否显示以及显示样式等等.

媒体查询语句

媒体查询语句为”@media (min-width: 740px) {}”,具体在设置上通过是从大到小,或从小到大来设计
注意中间and,在写的时候,前后必须要有空格,要不然等于没设置

媒体查询中,通常通过改变rem值来达到改变显示内容大小,比如:
  1. @media (min-width: 740px) {
  2.   html {
  3.     font-size: 18px;
  4.   }
  5. }
  7. @media (min-width: 375px) and (max-width: 740px) {
  8.   html {
  9.     font-size: 12px;
  10.   }
  11.   .markword {
  12.     display: none;
  13.   }
  14. }
  16. @media (max-width: 375px) {
  17.   html {
  18.     font-size: 8px;
  19.   }
  21.   .markword{
  22.     display: none;
  23.   }
  25.   .fasongtijiao {
  26.     display: none;
  27.   }
  28. }
最后的综合效果



对应的html代码

  1. <html lang="en">
  2.   <head>
  3.     <meta charset="UTF-8" />
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>0316简单的页面结构布局 字体图标和媒体查询的综合应用</title>
  7.     <link rel="stylesheet" href="0316.css">
  8.     <link rel="stylesheet" href="icon.css" />
  9.     <link rel="stylesheet" href="media.css" />
  10.   </head>
  11.   <body>
  12.     <header>
  13.       <!-- <span class="markword">请输入到查询的关键字</span> -->
  14.       <input type="text" class="keyword" placeholder="请输入到查询的关键字" autofocus/>
  15.       <span class="iconfont icon-fasongtijiao fasongtijiao"></span>
  16.       <!-- <span class="iconfont icon-chazhao chazhao"></span> -->
  17.     </header>
  18.     <main>主体部分</main>
  19.     <footer>脚部</footer>
  21.   </body>
  22. </html>
  24. 其它一些元素的css样式
  25. ```css
  26. .keyword {
  27.   margin-left: 1rem;
  28.   margin-top: 1rem;
  29.   width: calc(100vw - 5rem);
  30.   height: 2rem;
  31.   font-size: 1.5rem;
  32. }
  34. .fasongtijiao {
  35.   vertical-align: middle;
  36. }
  38. .keyword:active + .fasongtijiao {
  39.   color: yellow;
  40. }

最后一个知识点,如何保持input框+对应的元素,为整个窗口宽度呢?这里就用了CSS里的宽度计算公式,如keyword样式里的 width: calc(100vw - 5rem)

【文章原创作者：阿里云代理 http://www.558idc.com/aliyun.html 复制请保留原URL】
更多阅读