css学习7

最新推荐文章于 2022-11-29 20:30:00 发布

yuezheyue123

最新推荐文章于 2022-11-29 20:30:00 发布

阅读量139

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/yuezheyue123/article/details/86679874

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.伪类就是根据特征对元素进行分类。特征就是对于某个元素来说是随时可以消失的。

:link  未被访问的样式
:visited
:hover
:active
:focus  在获取焦点后的样式。

注意上面的设置的顺序。如果是将link放在下面，那么按照代码执行的顺序，先执行hover的代码，当执行到link的时候就会将样式覆盖掉。

2.定义鼠标样式使用cursor属性
具体的属性值：

crosshair :十字线光标
pointer:指针
move:十字箭头
text:竖线
wait:圆圈
help:带问号
url：引入其他样式，例如：
cursor: url("http://ued.taobao.com/blog/wp-content/themes/taobaoued/images/cursor.ico"),auto;

3.有序列表和无序列表的区别：
有序和无序列表中的内容都是有序的，只是有序列表会默认以1,2,3等编号标记。而无序列表只是用小圆点等标记。

在ul标签只能直接嵌套li标签，不能直接套其他的非li的标签，其他标签必须嵌套在li标签中。

4.可以通过更改标签的className来达到更换样式的目的。

<style type="text/css">
  .rotate-90 {
    -webkit-transform: rotate(90deg);
   transform: rotate(90deg)
  }
</style>
<script>
    function imageRotation(name) {
      document.getElementById('image').className = name;
    }
</script>
</head>

<body>
<img id="image" src="check_selected_green.png" alt="">
<button onclick="imageRotation('rotate-90')" >旋转90度</button>
</body>

5.下载文件和分享内容

var post = {
  "source": "check_selected_green.png",
  "demo": "check_selected_green.png",
  "feed": "http://www.weibo.com/"
};

function downloadSource() {
  //-self表示是在当前页面  如果是未知的文件，就会下载
  window.open(post.source, '_self');
}

function viewDemo() {
  //_blank表示新打开页面
  window.open(post.demo, '_blank');
}

function getFeed() {
  window.prompt('发送地址:', post.feed);
}

//会获取到当前的邮件地址然后设置主题和内容
function sendEmail() {
  var url = document.URL;
  var body = '分享地址: ' + url + '';
  window.location.href = 'mailto:?subject=' + document.title + '&body=' + body + '';
}

6.代码中添加标签

function addNewTask() {
    var list   = document.createElement('li');
    list.className = 'task-item';
    list.innerHTML = '<input type="checkbox" name="" value="done">新任务';
    var taskList = document.getElementById('task');
    taskList.appendChild(list);
}

7.设置列表ul和li的显示效果
如果不需要默认的边距等，需要设置list-style:none
设置项目符号list-style-image时候要选择list-style-position:inside。这样才会显示，默认应该是outside，不会显示默认符号背景。原因应该是被遮挡了，这时候设置margin-left后就会显示。
其中outside是将项目符号显示在列表项的文本行之外，inside就是阿静项目符号显示在列表文本框内。项目符号显示在里面和外面会影响符号与列表之间的距离，同时影响列表项的缩进效果。
可以使用list-style-type可以设置默认的符号，比如circle square等。

但是使用list-style-image会有局限性,因此常常是设置背景图片，来控制符号的显示。

设置背景虚线，不建议使用border，因为不同的浏览器显示效果可能不同，并且ie浏览器中可能虚线会显示不均匀。因此可以考虑设置背景，然后通过repeat-x来进行设置水平平铺。比如：通过设置bottom来显示在元素的下面。
background:url(xxxx) bottom repeat-x;

8.箭头的使用

/*设置在div底部中间的箭头*/
div:hover em{
  display: block;
  border-style: solid;
  /*高度为3，但是边框为6，这样保持住上面的三角*/
  height: 3px;
  border-width: 6px 6px 0 6px;
  border-color: #6f42c1 #fff;
  /*设置在div的底部的中间*/
  position: absolute;
  bottom: 0%;
  left: 50%;
}

本质上是显示上线紫色部分和左右的白色部分各半个。
在这里插入图片描述

yuezheyue123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css学习7

1.伪类就是根据特征对元素进行分类。特征就是对于某个元素来说是随时可以小时的。:link 未被访问的样式:visited:hover:active:focus 在获取焦点后的样式。注意上面的设置的顺序。如果是将link放在下面，那么按照代码执行的顺序，先执行hover的代码，当执行到link的时候就会将样式覆盖掉。2.定义鼠标样式使用cursor属性具体的属性值：cro...
复制链接

扫一扫

专栏目录