zoukankan      html  css  js  c++  java
  • web第四天,CSS基础

    一,怎么对写错的样式进行调试?

      1,看编辑器会不会报错,一般有下划线提示。

      2,看浏览器的调试台(F12),选择elements选项中需要调试的元素,然后通过style选项进行调试。在调试台中可以随意更改元素的属性值进行调试,但是不会对更改源代码。

    二,背景图片属性 

      1,background-attchment : fixed  让背景进行固定。

      2,background-size : 

        值 : width 和 height - > 背景图的宽和高, 可以为 100% 100% ,可以将背景图铺满容器。

        值 : 单词(cover)覆盖  可以将背景图片等比例地铺满整个容器,但是超出容器部分不会显示 

                   (contain)包含 可以将图片等比例的调整到刚好不会超出容器的大小,但是不会完全铺满容器

    三,CSS字体类型

      font-family : 宋体  微软雅黑

      默认情况下是:微软雅黑

      英文字体:Arial(对中文不起作用) 'Times New Roman' (对中文不起作用)

      中文字体:宋体,楷体、黑体(对中英文都起作用)

      中英文对照:https://www.cnblogs.com/chbyiming-bky/articles/9789869.html

      什么时候添加引号:当字体中存在空格的时候,添加引号。

      一般字体可以设置多个,通过空格进行添加,主要目的做一些备选方案。
     
     

    四,CSS字体大小

      font-size : 16px (默认大小)
      注:建议字体大小都设置成偶数。(主要目的是考虑文字对齐)

    五,CSS字体粗细

      font-weight :
        值 100 200 ... 900
      三个档:100 200 300 (细) 400 500 ( 正常 ) 600 700 800 900 (粗)
      单词 ( normal 默认表示正常 , bold 加粗 )

    六,CSS字体样式

      font-style :

        normal(正常)

        italic(倾斜)

      color:设置字体颜色

    七,CSS文本修饰

      text-decoration: overline(上划线) underline(下划线) line-through(删除线)

      可以设置多个值。

    八,CSS文本大小写(英文)

      text-transform: lowercase(单词小写) uppercase(单词大写) capitalize(首字母大写)

    九,CSS文本缩进(中文)

      text-indent: 32px;


      em单位:相对单位 1em == 一个字的px大小 默认情况下 1em == 16px
     

    十,CSS文本对齐方式

      text-align : left    right       center       justify(两端点对齐)

    十一,段落的行高

    定义:多行段落之间的间距。

    默认的行高:是不确定具体大小的,它总是比当前字体大小,大个1.3倍左右。

    值:具体的数值 30px 40px | scale( 比例值 1.5 20px -> 30px )
     

    十二,间距与折行

      letter-spacing:定义字间距
      word-spacing : 定义词间距  ( 针对英文 )

      强制折行 : (针对英文)
        1. word-break : break-all; (非常强烈的折行)
         2. word-wrap : break-word;(不是那么强烈的折行)  
              强烈的特点:不会留有空白区域,非强烈的特点:会留有一些空白区域。

    页面布局实例

      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4     <meta charset="UTF-8">
      5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
      6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
      7     <title>Document</title>
      8 </head>
      9 <body>
     10     <div id="header">
     11         <a href="#" >trevlsotheme</a>
     12         <input type="text" placeholder="SEARCH">
     13     </div>
     14     <div id="banner">
     15         <a href="#"><img src="#" alt="图片"></a>
     16     </div>
     17     <div id="news" >
     18         <div
     19             <h3><a href="#">公司新闻</a></h3>
     20             <ul>
     21                 <li>
     22                     <a href="#">董事长召开大会</a>
     23                 </li>
     24                 <li>
     25                     <a href="#">中国电器分会</a>
     26                 </li>
     27                 <li>
     28                     <a href="#">董事长访问中国住的大使馆</a>
     29                 </li>
     30                 <li>
     31                     <a href="#">企业文化与企业</a>
     32                 </li>
     33                 <li>
     34                     <a href="#">董事长的销售会议</a>
     35                 </li>
     36                 <li>
     37                     <a href="#">喜迎七一</a>
     38                 </li>
     39             </ul>
     40         </div>
     41         <div >
     42             <h3><a href="#">公司介绍</a></h3>
     43             <p>公司成立于1984年<br>经过几十年的发展</p>
     44             <p>已成为电器制造,房地产开发和金融<br>投资的大企业</p>
     45         </div>
     46         <div>
     47             <h3><a href="#">人才招聘</a></h3>
     48             <p>培养一流的人才,铸造一六的工程<br>实现员工与企业的共同发展</p>
     49             <a href="#"><img src="" alt="图片"></a>
     50         </div>
     51     </div>
     52     <div id="project">
     53         <h3><a href="">市场项目</a></h3>
     54         <a href="#"><img src="" alt="图片"></a>
     55         <p>交通轨道</p>
     56         <a href="#"><img src="" alt="图片"></a>
     57         <p>节能环保</p>
     58         <a href="#"><img src="" alt="图片"></a>
     59         <p>航空航天</p>
     60         <a href="#"><img src="" alt="图片"></a>
     61         <p>石油,天然气与采矿</p>
     62     </div>
     63     <div id="product">
     64        
     65         </ul>
     66         <div>
     67              <h3>产品中心</h3><hr>
     68             <ul>
     69                 <li><a href="#">汽车电机</a></li>
     70                 <li><a href="#">日用电机</a></li>
     71                 <li><a href="#">特种电机</a></li>
     72                 <li><a href="#">大功率电机</a></li>
     73                 <li><a href="#">电工设备</a></li>
     74             </ul>
     75             <ul>
     76                 <li><a href="#">自动化</a></li>
     77                 <li><a href="#">系统基础</a></li>
     78                 <li><a href="#">搅拌机</a></li>
     79                 <li><a href="#">电动车辆</a></li>
     80             </ul>
     81             <ul>
     82                 <li><a href="#">电池电源</a></li>
     83                 <li><a href="#">输入设备</a></li>
     84                 <li><a href="#">楼盘信息</a></li>
     85                 <li><a href="#">金融产品</a></li>
     86         </div>
     87         <div>
     88             <h3>技术研发</h3><hr>
     89             <ul>
     90                 <li><a href="">科技力量</a></li>
     91                 <li><a href=""></a>先进设备</li>
     92                 <li><a href="">研发测试</a></li>
     93                 <li><a href="">工艺流程</a></li>
     94             </ul>
     95         </div>
     96         <div>
     97             <h3>营销网络</h3><hr>
     98             <a href="#"><img src="" alt="图片"></a>
     99         </div>
    100     </div>
    101     <div id="foot">
    102         <a href="">网站地图</a>
    103         <a href="">联系我们</a>
    104         <a href="">关注入口</a>
    105         <a href="">采购系统入口</a>
    106         <p>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</p>
    107         <a href="">分享到</a>
    108     </div>
    109 </body>
    110 </html>

     

  • 相关阅读:
    jquery 实现跨域的简单小例子;
    jquery 实现文字轮播滚动
    js jquery 上传文件格式大小判断简单总结
    js 文本编辑插件 wangEditor 的使用教程和总结
    vue项目结构介绍
    bootstrap select下拉框模糊搜索和动态绑定数据解决方法
    bootstrap实现下拉框select option 美爆了
    jquery 获得select下拉框选择中的属性值
    Nginx + uWSGI 配置django---终极版
    django全文检索
  • 原文地址:https://www.cnblogs.com/lykpy/p/12270226.html
Copyright © 2011-2022 走看看