前端Day - 01

HTML

  • 标签
    <html> <img/>
  • 单标签
    <meta/>

    换行符
  • 标签对
    <html></html>
  • 常用标签对
 <head></head>   头部
 <body></body>   内容
  <title>标题<title>     标题
 <div></div>        块状
 <!doctype html>     开头声明类型
 <meta charset="UTF-8"/>   字符集(写在headn内)
  • 注释
    <!-- HTML 注释-->
    

CSS 层叠样式表

  • 标准 属性+冒号+值+分号
  <div style="width : 200px; 
height:200px;
 background:red;
 boder : 8px solid red;
backgroud : url(http://xxxx);
transition:1s;
 ">
</div>

-注释

   /*xxxx*/

JavaScript 脚本语言

  • 行为+=+""+属性+=+' '+值
<div onclick="this.style.width = '800px'; "></div>

id选择符 样式表位置

id选择符

//标签名字
<div id="div1">aa</div>

样式表

//行间样式表,只适用于单个块级元素
  <div style="width:100px; height:200px; font-size:30px;">aaa<br/>bbbbbbbbb</div>


//内部样式表,写于</head>前面,#代表取出名字为div1的样式的元素
<style>
#div1{
  width:300px
}
</style>


//外部样式表
<link rel="stylesheet" href="123.css"/>

常见样式

颜色值模式

//颜色单词
#div1{
  width:200px;
  height:200px
background-color:red
}

//16进制
#div1{
  width:200px;
  height:200px
background-color:#222
}

//rgb模式
#div1{
  width:200px;
  height:200px
background-color:rgb(140,164,234)
}

背景图片


  #div1{
  width:200px;
  height:200px
/*默认状态下平铺*/
  background - image:url(img/1.jpg)
/* 
  no-repeat 不重复
  repeat-x 水平平铺
  repeat-y 垂直平铺
*/
  backgroud-repeat:no-repeat;
/*
  背景定位:x y 坐标
         : 50% 30% 父控件的百分比
         : right top  靠右边 靠上边(默认为center )
*/
backgroud-position:100px 30px;

/*
  scroll 滚动(默认)
  fixed 固定
*/
backgroud-attachment:scroll
}
/*背景图片超出部分默认裁剪*/
/*单一样式*/
/*backgroud-attachment:scroll  */
/*复合样式*/
/*backgroud:scroll red no-repeat  */

边框

  #div1{
  width:200px;
  height:200px
/*
  10px 粗细
  solid  实现 dotted 点划线 dashed 虚线
  red 颜色
  boder-top: 只有上边有边框
  
*/
  boder:1px dashed #033;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,997评论 19 139
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,627评论 32 459
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,331评论 1 41
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,665评论 0 30
  • 对于个性一代的90后来说,一场独具创意的专属婚礼,绝对是不惜重金打造的。无论小清新、森女系、高雅派还是梦幻的公主梦...
    职班室阅读 337评论 0 0