html+css学习笔记004-元素选择器0背景属性

Author:Mr.柳上原

  • 付出不亚于任何的努力
  • 愿我们所有的努力,都不会被生活辜负
  • 不忘初心,方得始终

零基础

刚开始的时候很难

不仅仅是因为第一次接触代码

还有生活的压力、年龄的压力

我问一个只有高中学历,当兵退伍回来,年纪比我大很多的朋友,你是怎么学成前端的

“没有其他方法,坚持下来就好了。”

现在在阿里巴巴上班的朋友如是说道。

原来成功如此简单,坚持就好了

<!DOCTYPE html> <!-- 文档类型:标准html文档 -->

<html lang='en'> <!-- html根标签 翻译文字:英文 -->

<head> <!-- 网页头部 -->

<meat charset='UTF-8'/> <!-- 网页字符编码 -->

<meat name='Keywords' content='关键词1,关键词2'/>

<meat name='Description' content='网站说明'/>

<meat name='Author' content='作者'/>

<title>前端59期学员作业</title> <!-- 网页标题 -->

<link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外链样式表 -->

<style type='text/css'> /*内部样式表*/

*{ /* 通配符选择器 可以选择所有的标签 */
width:0px;
}

.wrap{ /* calss选择器 可以有多个值 */
width:0px;
}

#wrap{ /* id选择器 只能有唯一的值 */
width:0px;
}

.wrap ul li{ /* 后代选择器 */
width:0px;
}

#wrap,.wrap,ul,li{ /*多元素选择器 */
width:0px;
}

div > p{  /* 子元素选择器 */
width:0px;
} 

p + p{ /* 邻居选择器 */
width:0px;
 } 

[p="wrap"]{ /* 属性选择器:[p="wrap"] 有p属性且p=wrap  [p~="wrap"] 有p属性且p=wrap 或 包含wrap值  [p|="wrap"] 有p属性且p=wrap 或 以wrap-开头*/
width:0px;
 } 

background:url(' ') no-repeat -10px -280/40px 38px;
background-color 背景颜色
background-image 背景图片
background-repeat 背景平铺(repeat平铺 no-repeat不平铺 repeat-x repeat-y平铺x,y轴)
background-position 背景位置
background-size 背景大小(contain铺满xy轴任意一条为止 cover铺满全部轴)
backgruond-attachment 背景图片位置(scroll背景图片随盒子滚动而滚动 fixed背景图片不随盒子滚动)

</style>

</head>

<body> <!-- 网页主干:可视化区域 -->

<div id='wrap' class='wrap'>
<ul>
<li></li>
<li></li>
</ul>
</div>

</body>

</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端小作坊

CSS animation和transition的性能探究

你可能已经在你的项目中用上了CSS Animation和CSS transition。如果还没有用上,那你有点out了。快去看下CSS-Trick上的这两篇关于...

9810
来自专栏施炯的IoT开发专栏

[翻译]Windows Phone 7 Application Controls

前言-关于这段译文 Windows Phone开发的中文资料缺乏,这段译文翻译自《UI Design and Interaction Guide for Win...

18070
来自专栏Windows Community

UWP 手绘视频创作工具技术分享系列 - Ink & Surface Dial

本篇作为技术分享系列的第四篇,详细讲一下手绘视频中 Surface Pen 和 Surface Dial 的使用场景。  先放一张微软官方商城的图,Surfac...

310120
来自专栏企鹅号快讯

浅谈Web自适应

前言 ? 随着移动设备的普及,移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁,手机厂商繁多,导致的问题是每一台机器的屏幕宽度和分辨率...

36580
来自专栏DeveWork

WebFont 三宗罪之二:吹毛求疵的WebFont 渲染差异

话说上次发了篇危言耸听的“WebFont 三宗罪”系列之一,今日来讲三宗罪之二:吹毛求疵的WebFont 渲染差异。为什么用上“吹毛求疵”这个修饰词呢?因为Je...

24550
来自专栏儿童编程

Scratch做高逼格的互动艺术作品(一)

最近在郎师兄推荐下初步了解了一下processing互动编程艺术,真是美轮美奂,直接跪了。今天我用Scratch也做了一个互动的小作品,自我感觉挺好(大神勿喷~...

55140
来自专栏天天

css中mask属性实现灯光闪动

在过去,CSS mask属性在使用的时候就是mask: xxx,但是现在随着这个属性的规范化,mask属性实际上已经成为了诸多mask-*的缩写,这和backg...

26830
来自专栏华章科技

天天做饼图,你烦不烦?老板都看腻了!

好象也没毛病,也挺好看的。但是....所有人的图表都是这样做,怎能突出你的图表个性?还可以更好看?看看下面的水滴图表:

11120
来自专栏Fred Liang

移动端 Web 渲染解决方案

秋招 H5 移动端(面向微信)设计师出的落地页的动画层数有30层左右,在通过 bodymovin 导入前端页面中后再加载好素材之后仍有5秒左右黑屏渲染动画 目...

20340
来自专栏我和未来有约会

CaseStudy(showcase)界面篇-desing设计界面

做silvelight也有一段时间了,相册、游戏,刚刚完成的showcase这个小程序算是一个阶段了。这里就以showcase这个项目来做一下CaseStudy...

18570

扫码关注云+社区

领取腾讯云代金券