Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 第五课:简单的页面结构布局,字体图标和媒体查询的综合应用
Blogger Information
Blog 12
fans 0
comment 0
visits 7748
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
第五课:简单的页面结构布局,字体图标和媒体查询的综合应用
屈世明
Original
520 people have browsed it

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

页面结构

最常见的页面结构就是上中下也即<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)

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post