border-bottom | 易学教程

蚂蚁庄园

阅读更多关于蚂蚁庄园

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>chick</title> <style> html{min-width:320px;overflow-x:hidden} body,html{height:100%;line-height:1;-webkit-user-select:none;//禁止用户复制页面文本 -webkit-touch-callout:none;-webkit-overflow-scrolling:touch;//ios滚动效果 -webkit-font-smoothing:antialiased;//mac下字体 -webkit-tap-highlight-color:rgba(242,137,76,.05);://a标签点击高亮效果} article,aside,blockquote

导航栏

阅读更多关于导航栏

<template> <div class="box"> <div v-for="(item, i) in Array(4)" :key='i' class='item'> <span>歌曲</span> </div> </div> </template> <style scoped> .box{ display: flex; line-height: 44px; } .item{ flex: 1; background-color: blue; color: red; text-align: center; } .item span{ border-bottom: 2px solid red; padding-bottom: 8px; } </style> 来源： CSDN 作者： QunBingCheng 链接： https://blog.csdn.net/chengQunBin/article/details/104574356

[翻译]jQuery Mobile入门教程——主题的使用和定制

阅读更多关于 [翻译]jQuery Mobile入门教程——主题的使用和定制

原作： Using and customizing jQuery Mobile themes —— Matthew David 翻译： filod 转载声明：请注明原作者、翻译者以及译文链接。在之前的文章 jQuery Mobile 入门教程里，我对jQueryMobile的使用进行了入门介绍，你可以使用它创造出非常华丽的移动站点——漂亮的按钮、优雅的界面等等等等。然而仅仅是这样的话，你的需求肯定不会被满足的——你或许需要给header换个颜色来配合自己公司的logo？又或者需要突出显示一下某个静音按钮？总而言之，你需要自己控制jQueryMobile的显示效果。本文旨在介绍教大家如何在jQueryMobile构建的站点中控制主题显示的效果。 jQueryMobile的主题（theme）和调板（swatches）很显然，jQueryMobile是用CSS来控制在屏幕中的显示效果的，而在CSS文档中又包含两个主要的部分：结构：用于控制元素（如按钮、tab等）的在屏幕中显示的位置，内外边距等。主题：用于控制可视元素的视觉效果，例如字体、颜色、渐变、阴影、圆角等。你可以通过修改主题来控制可视元素（如按钮）的效果。注意：为了尽量减少图片的使用（目的是减少请求数），jQueryMobile使用了css3的方式来替代传统的图片方式创建按钮等控件。当然用图片来设计也可以

Python爬虫（一）

阅读更多关于 Python爬虫（一）

本教程基于Python3.6，Mac OS系统，Pycharm编辑器使用urllib库可以获取网页,示例代码如下 1 from urllib import request 2 3 #要爬取的网页，这里以百度为例 4 url = 'http://www.baidu.com/' 5 6 #构建请求对象Request 7 res = request.Request(url) 8 9 #发起请求，得到请求结果，命名为response 10 response = request.urlopen(res) 11 12 #读取结果，命名为html 13 html = response.read() 14 15 #打印查看结果 16 print(html) 可以看到打印的结果为 /Library/Frameworks/Python.framework/Versions/3.6/bin/python3.6 /Users/pn/Desktop/Python/blog/demo.py b'<!DOCTYPE html>\n\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n

怎么用javascript进行拖拽

阅读更多关于怎么用javascript进行拖拽

Javascript的特点是dom的处理与网页效果，大多数情况我们只用到了这个语言的最简单的功能，比如制作图片轮播/网页的tab等等，这篇文章将向你展示如何在自己的网页上制作拖拽．有很多理由让你的网站加入拖拽功能，最简单的一个是数据重组．例如：你有一个序列的内容让用户排序，用户需要给每个条目进行输入或者用select 选择，替代前面这个方法的就是拖拽．或许你的网站也需要一个用户可以拖动的导航窗口！那么这些效果都是很简单：因为你可以很容易的实现！网页上实现拖拽其实也不是很复杂．第一你需要知道鼠标坐标，第二你需要知道用户鼠标点击一个网页元素并实现拖拽，最后我们要实现移动这个元素．获取鼠标移动信息第一我们需要获取鼠标的坐标．我们加一个用户函数到document.onmousemove就可以了: document.onmousemove = mouseMove; function mouseMove(ev){ ev = ev || window.event; var mousePos = mouseCoords(ev); } function mouseCoords(ev){ if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body

css鼠标移入底部边框展开效果

阅读更多关于 css鼠标移入底部边框展开效果

经常看到这种效果，就研究了下。 <a href='' class='tag'>测试一下吧</a> .tag { text-decoration:none; position:relative; padding:10px } .tag:after{ content:''; position:absolute } .tag:after { border-bottom:2px solid #333; left:51%; right:51%; bottom:0px; transition: all .2s; } .tag:hover:after { left:0%; right:0% } 来源： CSDN 作者：陈星波链接： https://blog.csdn.net/c2635222586/article/details/87025765

给div li 类似元素添加圆角

阅读更多关于给div li 类似元素添加圆角

border-top-right-radius: 5px; //右上 border-top-left-radius: 5px; //左上 border-bottom-right-radius: 5px; //右下 border-bottom-left-radius: 5px; //左下来源： CSDN 作者： jialan75 链接： https://blog.csdn.net/jialan75/article/details/104075424

导航鼠标悬浮时底部边框从中间往两边移动效果

阅读更多关于导航鼠标悬浮时底部边框从中间往两边移动效果

CSS矩形、三角形等

阅读更多关于 CSS矩形、三角形等

1、圆形 CSS代码如下：宽高一样，border-radius设为宽高的一半 #circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } 2、椭圆 CSS代码如下：border-radius:水平半径/垂直半径 #oval { width: 200px; height: 100px; background: red; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; } 3、等边三角上三角CSS代码如下：设置border-bottom宽度实线颜色，左右border左右宽度为一半，实线透明。下三角、左三角、右三角可举一反三实现。 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } 4、直角三角

纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

阅读更多关于纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

1、正方形代码如下: #square { width: 100px; height: 100px; background: red; } 2、长方形 CSS代码如下： #rectangle { width: 200px; height: 100px; background: red; } 3、圆形代码如下: #circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } 4、椭圆代码如下: #oval { width: 200px; height: 100px; background: red; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; } 5、上三角代码如下: #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: