随笔分类 -  CSS

上一页 1 2
轮播图注册页面css3
摘要：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>轮播图注册页面1</title> <link rel="stylesheet" href="css/bootstrap.css" /> <link href="https://c 阅读全文
posted @ 2020-06-28 16:13 Smile*^ 阅读(145) 评论(0) 推荐(0)
按钮效果
摘要：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { font-size: 16px; font-family: 'Helvetica', 'Arial', 阅读全文
posted @ 2020-06-27 21:33 Smile*^ 阅读(85) 评论(0) 推荐(0)
中英文切换导航栏
摘要：<!doctype html><html><head><meta charset="utf-8"><title>中英文切换导航栏</title><style type="text/css"> *{margin:0px;padding:0;} /*清除浮动*/ ul{overflow: hidden; 阅读全文
posted @ 2020-06-26 20:22 Smile*^ 阅读(219) 评论(0) 推荐(0)
相机放大
摘要：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</ 阅读全文
posted @ 2020-06-25 23:00 Smile*^ 阅读(155) 评论(0) 推荐(0)
文字在图片上
摘要：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .img-group{ /*使整个大盒子的长度与图片适应*/ display: inline-block; po 阅读全文
posted @ 2020-06-19 22:32 Smile*^ 阅读(104) 评论(0) 推荐(0)
练习鼠标悬停切换图片页面
摘要：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> /*去除默认样式*/ *{ margin: 0; padding: 0; } /*设置外面的大盒子*/ .box 阅读全文
posted @ 2020-06-10 12:34 Smile*^ 阅读(1115) 评论(0) 推荐(0)
解决盒子塌陷问题
摘要：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .big{ border: 2px solid red; } .a{ width: 200px; height: 200px; background 阅读全文
posted @ 2020-05-17 21:16 Smile*^ 阅读(357) 评论(0) 推荐(0)
html+css导航栏
摘要：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* * 清除默认样式 */ *{ margin: 0; padding: 0; } /* * 设置ul */ .n 阅读全文
posted @ 2020-05-15 20:19 Smile*^ 阅读(1117) 评论(0) 推荐(0)
浮动
摘要：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* * 块元素在文档流中默认垂直排列，所以这三个div自上到下依次排开 * 如果希望块元素在页面中水平排列，可以使 阅读全文
posted @ 2020-05-13 10:09 Smile*^ 阅读(176) 评论(0) 推荐(0)
块元素和内联元素
摘要：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--块元素和内联元素 div 就是一个块元素 所谓块元素就是会独占一行，无论它的内容有多少，它都会独占一行 p h1 h2 h3 阅读全文
posted @ 2020-05-12 18:43 Smile*^ 阅读(103) 评论(0) 推荐(0)
JS 实现轮播图
摘要：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> window.onload=function(){ //获取ul标签 var imgList = 阅读全文
posted @ 2020-04-19 15:11 Smile*^ 阅读(320) 评论(0) 推荐(0)
固定定位
摘要：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: re 阅读全文
posted @ 2020-04-09 13:22 Smile*^ 阅读(453) 评论(0) 推荐(0)
绝对定位
摘要：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: re 阅读全文
posted @ 2020-04-09 13:21 Smile*^ 阅读(198) 评论(0) 推荐(0)
相对定位
摘要：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: re 阅读全文
posted @ 2020-04-09 13:20 Smile*^ 阅读(296) 评论(0) 推荐(0)

上一页 1 2