css

HTML(css+div)登录界面

万次阅读 多人点赞 2018-05-31 23:53:39

HTML(css+div)登录界面

 （1）这是当时做的一个课程设计，很多人想要图片，在这里我把用到的所有图片资源分享下

 （2）链接：https://pan.baidu.com/s/1nUX1DQe_aDZQMf2Zbblm_A

         提取码：twcp

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>login</title>
<style type="text/css">
*{
	margin: 0;
	padding: 0;
}
#wrap {
	height: 719px;
	width: 100;
	background-image: url(4.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
}
#head {
	height: 120px;
	width: 100;
	background-color: #66CCCC;
	text-align: center;
	position: relative;
}
#foot {
	width: 100;
	height: 126px;
	background-color: #CC9933;
	position: relative;
}
#wrap .logGet {
	height: 408px;
	width: 368px;  
	position: absolute;
	background-color: #FFFFFF;
	top: 20%;
	right: 15%;
}
.logC a button {
	width: 100%;
	height: 45px;
	background-color: #ee7700;
	border: none;
	color: white;
	font-size: 18px;
}
.logGet .logD.logDtip .p1 {
	display: inline-block;
	font-size: 28px;
	margin-top: 30px;
	width: 86%;
}
#wrap .logGet .logD.logDtip {
	width: 86%;
	border-bottom: 1px solid #ee7700;
	margin-bottom: 60px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
}
.logGet .lgD img {
	position: absolute;
	top: 12px;
	left: 8px;
}
.logGet .lgD input {
	width: 100%;
	height: 42px;
	text-indent: 2.5rem;
}
#wrap .logGet .lgD {
	width: 86%;
	position: relative;
	margin-bottom: 30px;
	margin-top: 30px;
	margin-right: auto;
	margin-left: auto;
}
#wrap .logGet .logC {
	width: 86%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}


.title {
	font-family: "宋体";
	color: #FFFFFF;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */
	font-size: 36px;
	height: 40px;
	width: 30%;
}

.copyright {
	font-family: "宋体";
	color: #FFFFFF;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */
	height: 60px;
	width: 40%;
	text-align:center;
}
	

#foot .copyright .img {
	width: 100%;
	height: 24px;
	position: relative;
}
.copyright .img .icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin-left: 22px;
	vertical-align: middle;
	background-image: url(%E7%94%B5%E5%AD%90%E9%82%AE%E4%BB%B6.png);
	background-repeat: no-repeat;
	vertical-align: middle;
	margin-right: 5px;
}
	
.copyright .img .icon1 {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin-left: 22px;
	vertical-align: middle;
	background-image: url(%E5%9C%B0%E5%9D%80.png);
	background-repeat: no-repeat;
	vertical-align: middle;
	margin-right: 5px;
}
.copyright .img .icon2 {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin-left: 22px;
	vertical-align: middle;
	background-image: url(%E8%81%94%E7%B3%BB%E6%96%B9%E5%BC%8F.png);
	background-repeat: no-repeat;
	vertical-align: middle;
	margin-right: 5px;
}
#foot .copyright p {
	height: 24px;
	width: 100%;
}
</style>
</head>

<body>
<div class="header" id="head">
  <div class="title">企业人事管理系统</div>
	
</div>
	
<div class="wrap" id="wrap">
	<div class="logGet">
			<!-- 头部提示信息 -->
			<div class="logD logDtip">
				<p class="p1">登录</p>
			</div>
			<!-- 输入框 -->
			<div class="lgD">
				<img src="img/logName.png" width="20" height="20" alt=""/>
				<input type="text"
					placeholder="输入用户名" />
			</div>
			<div class="lgD">
				<img src="img/logPwd.png" width="20" height="20" alt=""/>
				<input type="text"
					placeholder="输入用户密码" />
			</div>
			<div class="logC">
				<a href="index.html" target="_self"><button>登 录</button></a>
			</div>
		</div>
</div>
	
<div class="footer" id="foot">
  <div class="copyright">
    <p>Copyright © 2018 Qunar.com Inc. All Rights Reserved.</p>
    <div class="img">
		<i class="icon"></i><span>联系邮箱：jiankangsun@yahoo.com</span>
	</div>
	
	<div class="img">
		<i class="icon1"></i><span>联系地址：合肥工业大学</span>
	</div>
	  
	<div class="img">
	  <i class="icon2"></i><span>联系电话：18355042634</span>
	</div>


  </div>
	
</div>
	
	
</body>
</html>

收起

展开全文

HTML login div

细说CSS(CSS+CSS3)
千人学习 2019-07-19 10:05:13
本课程包含7章45个小节课程，内容涵盖：CSS基础、CSS选择器、CSS属性和属性值、CSS 边框和背景、CSS盒子模型、文本样式等。
收起

前端必看的8个HTML+CSS技巧

万次阅读 多人点赞 2020-04-06 21:14:05

CSS是一个很独特的语言。看起来非常简单，但是某种特殊效果看似简单，实现起来就颇有难度。



点赞是动力 💪，关注是支持 👊！

建议、疑问、话题欢迎在评论区留言哦！

CSS是一个很独特的语言。看起来非常简单，但是某种特殊效果看似简单，实现起来就颇有难度。这篇文章主要是给在学习前端的童鞋分享一些新的CSS技巧，一些在前端教程和培训课堂中不会讲到的知识。第二就是让还在前端开发这条道路上的童鞋们，重新燃起对前端排版和特效的热爱和热情！🔥
文章目录
1. 固定底部内容
2. 悬停放大图片特效
3. 瞬间黑暗模式
🌓 Darkmode.js
4. 自定义列表符号
5. 图片视差效果
仅使用CSS
使用CSS + JavaScript
6. 裁剪图像的动画
7. 混合模式（Blend）
8. 瀑布流布局
总结
推荐阅读


1. 固定底部内容

这种是一个非常常见的布局方式，但是对于新手来说是比较常见的难题。
这种布局方式在后台管理系统中比较常见，当我们内容不足浏览器窗口高度时，底部内容需要固定在底部。当内容超出了浏览器窗口高度，就会随着内容往后推。
在有CSS3之前，实现这个效果是颇有难度的。浏览器窗口高度是会根据不同用户打开浏览器的情况，屏幕大小的差异和浏览器的缩放比例而变。我们需要借助JavaScript来实时获取浏览器高度进行运算才能实现。虽然说标题是说“固定”底部，但是我们想要的效果不是position: fixed。使用固定定位，在内容高于窗口高度时，就会挡住我们的内容。
随着CSS3的来临，最完美的实现方式是使用Flexbox。实现的关键就是使用不太被关注的flex-grow属性，可以在我们的内容标签元素（比如div）中使用。在我们下面的例子里使用了main标签。

我来讲解一下实现原理吧。

flew-grow是用来控制一个flex元素相对它同等级flex元素的自身可扩充的空间。如果我们使用flex-grow: 0，那这个flex元素就完全不会扩展了。所以我们需要把头部和底部之间的内容标签元素设置为flex-grow: 1或者flex-grow: auto，这样内容部分就会自动填充满头部和底部之外的所有空间。
为了避免底部内容受内容部分扩充空间的影响，我们给footer底部元素flex-shrink: 0属性。flex-shrink的作用与flex-grow是恰恰相反，用来控制flex元素收缩的空间，这里我们给了flex-shrink: 0就是为了底部footer的大小不受影响。
我们直接上HTML和CSS代码看看是怎么实现的。

HTML

<div id="document">
	<nav>
		<h1>头部内容</h1>
	</nav>
	<main>
		<p>可以添加更多内容看看底部的变化哦！</p>
	</main>
	<footer>
		<h1>底部内容</h1>
	</footer>
</div>


CSS

#document {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #202020;
    font-family: microsoft yahei,wenquanyi micro hei,sans-serif !important;
}

nav, footer {
    background: #494949;
    display: flex;
    justify-content: center;
}

main {
    color: #bdbdbd;
    flex: auto;
}

footer {
    flex-shrink: 0;
}

* {
    margin: 0;
}

h1,
p {
    padding: 15px;
}

nav > h1 {
    color: #82FCFD;
    text-shadow: 1px 1px 4px #00000080;
}

footer > h1 {
    color: #82FCFD;
    text-shadow: 1px 1px 4px #00000080;
}


🌟知识点总结：

flex-grow — 是用来控制一个flex元素相对它同等级flex元素的自身可扩充的空间
flex-shrink — 作用与flex-grow是恰恰相反，用来控制flex元素收缩的空间


预览实际效果 ｜ GitHub源码 ｜ 喜欢的童鞋 🌟star 一下谢谢


2. 悬停放大图片特效


悬停放大图片是一个特别吸引眼球的特效，比较常用于可点击的图片。当用户悬停鼠标在图片上，图片会稍微的放大。
其实实现这个特效是非常简单的。首先我们需要一个div包裹这img标签，这个包裹层是用来遮挡住图片，当图片放大时不会出现图片超出我们规定的宽高以外。
首先我们来讲讲div包裹的属性，我们需要给它一个固定的width宽和height高。然后我们必须给予这个元素overflow: hidden属性。让图片放大的时候不会超出这个div元素的宽高。有了这个包裹层，我们就可以编写img的各种效果了。
我的例子里面用了transform: scale(1,1)作为悬停时的图片特效，这个transform是用于改变任何元素的属性的，然后scale是用于放大（整数就会放大）或者缩小（负数就会缩小）元素的。
上代码让大家看看：

html body中放入

<div class="img-wrapper">
  <img src="https://img-blog.csdnimg.cn/2020032122230564.png"/>
</div>


CSS

.img-wrapper {
  width: 400px;
  height: 400px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.img-wrapper img {
  height: 400px;
  -webkit-transition: 0.3s linear;
  transition: 0.3s linear;
}

.img-wrapper img:hover {
  transform: scale(1.1);
}

.img-wrapper {
  display: inline-block;
  box-sizing: border-box;
  border: 3px solid #000;
}

如果你们想让图片更加炫酷可以加上图片过滤属性filter，让图片变灰或者变深褐色，然后悬停时候出现更加炫酷的颜色变幻。灰化的属性是filter: grayscale(100%);，然后深褐色化的属性是filter: sepia(100%)。其实图片还有很多过滤属性的，大家有兴趣也可以去尝试一下哦！
加入特殊效果的代码如下：

HTML

<!-- 灰度过滤 -->
<div class="img-wrapper">
  <img
    class="grayscale-img"
    src="https://img-blog.csdnimg.cn/2020032211021728.png"
  />
</div>

<!-- 深褐色过滤 -->
<div class="img-wrapper">
  <img
    class="sepia-img"
    src="https://img-blog.csdnimg.cn/2020032122230564.png"
  />
</div>


CSS

/* ============== 
* 灰度过滤 
* ==============*/
.grayscale-img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.grayscale-img:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

/* ============== 
* 深褐色过滤
* ==============*/
.sepia-img {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
}

.sepia-img:hover {
  -webkit-filter: sepia(0);
  filter: sepia(0);
}


🌟知识总结

transform — 用于改变元素
scale — 对元素进行放大和缩小
filter — 图片过滤器
grayscale — 灰度过滤
sepia — 深褐色过滤


预览实际效果 ｜ GitHub源码 ｜ 喜欢的童鞋 🌟star 一下谢谢


3. 瞬间黑暗模式


最近微信也逃脱不了黑暗时代的到来，网页也很多都做了黑暗模式的兼容和主题。如果我们在做的一个网站想瞬间实现黑暗模式可以怎么实现呢？
其实有一个很快的方式，我们可以使用invert和hue-rotate两个CSS3过滤器来实现。
filter: invert() — 是从0到1的刻度，1是从白变黑。

filter: hue-rotate() — 用于改变你元素的颜色，同时或多或少保持原本相同的色系。这个属性的值可以从0deg到360deg。
在我们页面的body标签上添加这两个属性，我们就可以快速尝试把我们的网站变成"黑暗模式"。这里需要注意的是，如果body和html上没有设置background背景颜色，这个过滤就会不起效了哦。
CSS的代码如下：
html {
  background: #fff;
}

body {
  background: #fff;
  filter: invert(1) hue-rotate(270deg);
}

实现效果



这里我们会发现图片的颜色会受影响，并不是很美观，使用css过滤器是无法完美切换黑暗模式的。不过使用JavaScript辅助就可以完美的切换黑暗模式。
最近出了一个JavaScript辅助插件叫Darkmode.js。
🌓 Darkmode.js
其实Darkmode.js运用的也是css里面的一个特性叫mix-blend-mode — “CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合“。加上Javascript的辅助判断哪些页面上的元素需要黑化的，哪些是不需要黑化的。就会想我们之前那种做法，导致其他不需要黑化的元素，比如图片，受到影响导致颜色出现问题。
使用Darkmode.js非常简单，只要在脚本里面添加以下代码就可以马上加入一个插件，
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.5/lib/darkmode-js.min.js"></script>
<script>
  // 这些是这个插件的可配置项：
  var options = {
    bottom: "32px", // 定位底部距离 - 默认: '32px'
    right: "32px", // 定位右边距离 - 默认: '32px'
    left: "unset", // 定位左边距离 - 默认: 'unset'
    time: "0.5s", // 默认动画时间: '0.3s'
    mixColor: "#fff", // 需要改变的颜色 - 默认: '#fff'
    backgroundColor: "#fff", // 背景颜色 - 默认: '#fff'
    buttonColorDark: "#262728", // 黑暗模式下按钮颜色 - 默认: '#100f2c'
    buttonColorLight: "#fff", // 日间模式下按钮颜色 - 默认: '#fff'
    saveInCookies: true, // 是否在cookie保存当前模式 - 默认: true,
    label: "🌓", // 切换模式按钮图标 - 默认: ''
    autoMatchOsTheme: true // 是否自动根据系统适应模式 - 默认: true
  };

  let darkmode = new Darkmode(options);
  darkmode.showWidget();
</script>

如果你不希望用这个插件的默认按钮，你可以在你的JavaScript代码中自主控制。我们可以通过.toggle()方法来切换模式，同时可以使用.isActivated()来检测是否已经进入黑暗模式。
const darkmode =  new Darkmode();
darkmode.toggle();
console.log(darkmode.isActivated()) // 如果已经进入黑暗模式会返回 true


🌟知识总结

filter: invert() — 可以把页面从白变黑，也可以从黑变白。
filter: hue-rotate() — 用于改变你元素的颜色，同时或多或少保持原本相同的色系。
Darkmode.js — 瞬间实现黑暗模式。


Invert方式黑暗模式：预览实际效果 ｜ GitHub源码 ｜ 喜欢的童鞋 🌟star 一下谢谢

Darkmode.js黑暗模式：预览实际效果 ｜ GitHub源码 ｜ 喜欢的童鞋 🌟star 一下谢谢


4. 自定义列表符号


ul，li的无序列表有默认的符号·，但是在很多情况下我们希望可以给这个符号加入自己的样式和颜色，甚至是换成自定义的符号。默认的符号我们是无法做任何的样式处理，而且默认的符号在CSS属性里面只有几个选择可以使用，很多情况下都是无法满足我们的设计。
其实自定义无序列表符号不难，我们只需要使用伪元素::before加content属性就可以实现。
在我这个例子里面我做了两个任务列表，一个是待处理任务，一个是已完成任务，各自给了不一样的列表符号和颜色。
实现原理
一、首先我们禁用了ul的默认符号样式list-style: none
二、在li的:before伪元素上给予content内容值，待处理任务使用🗹，已完成任务li.completed:before使用✔
三、为了展示效果更加好看我分别给了li和li .completed两个不同的颜色
上代码看看是怎么实现的吧：
HTML
<div>
  <h2>待处理</h2>
  <ul>
    <li>待办任务1</li>
    <li>待办任务2</li>
    <li>待办任务3</li>
    <li>待办任务4</li>
    <li>待办任务5</li>
  </ul>
</div>
<div>
  <h2>已完成</h2>
  <ul>
    <li class="completed">完成任务1</li>
    <li class="completed">完成任务2</li>
    <li class="completed">完成任务3</li>
  </ul>
</div>

CSS
ul {
  list-style: none;
  color: #fff;
  font-size: 20px;
  border: 3px solid #000;
  padding: 1rem 2rem;
  min-height: 200px;
  margin: 15px 2rem 0 0;
  background: #323232;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  border-radius: 8px;
}

li {
  padding: 0.3rem 0;
}

li::before {
  content: "🗹 ";
  color: aqua;
}

li.completed::before {
  content: "✔ ";
  text-decoration: none;
  color: greenyellow;
}

li.completed {
  text-decoration: line-through;
  color: #bdbdbd;
}

::before和::after伪元素加content属性可以用来做很多特殊的效果，也是当代前端排版比较常用的“魔法”。说到伪元素的使用，我再给大家说一个比较常用的使用场景。
在管理后台或者是文章展示中，我们经常可以见到的“面包屑导航”也是用伪元素来插入每个目录中间的符号的。



实现逻辑
一、这个导航含有3个a标签，首先给每个a标签加入一个伪元素::after，然后在content属性插入/符号。
二、然后使用a:first-child，这个伪类会选择到第一个a标签，然后使用content属性加入»符号。
三、因为我们第一步在每个a标签的后面插入了/符号, 所以我们需要在最后一个a标签清除掉。这里我们使用:last-child选择到最后一个a标签，然后用content: " "属性把伪元素的内容清楚掉。
HTML
<div class="breadcrumb">
  <a>三钻</a>
  <a>前端</a>
  <a>教程</a>
</div>

CSS
.breadcrumb {
  font-size: 1.6rem;
  color: #fff;
}
.breadcrumb a:first-child {
  color: #82fcfd;
}
.breadcrumb a:first-child::before {
  content: " » ";
}
.breadcrumb a::after {
  content: " /";
  color: #ef6eae;
}
.breadcrumb a:last-child::after {
  content: "";
}


🌟知识总结

::before | ::after — 伪元素用于向某些选择器添加特殊的效果。
content — CSS 属性用于在元素的  ::before 和 ::after 伪元素中插入内容。使用content 属性插入的内容都是匿名的可替换元素。
:first-child — CSS伪类表示在一组兄弟元素中的第一个元素。
:last-child — CSS伪类代表父元素的最后一个子元素。


自定义无序列表：预览实际效果 ｜ GitHub源码 ｜ 喜欢的童鞋 🌟star 一下谢谢

面包屑导航：预览实际效果 ｜ GitHub源码 ｜ 喜欢的童鞋 🌟star 一下谢谢


5. 图片视差效果


这个超级炫酷的效果在官网中非常的受欢迎，这种效果可以给用户带来视觉冲击，也给我们的网站带来了活力。普通的网页图片会跟随着网页一起滑动，但是视觉差效果图就会固定在底部，只有图片所在的窗口上的元素会移动。
仅使用CSS
对你没有看错，这个效果只需要用到CSS就能轻易的实现！我们只要使用一个CSS背景图的属性background-attachment: fixed，这个特性会把背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
实现理论：
一、在含有图片的元素中加入background: url()和background-size: cover（第二个属性适用于定义图片为封面，可以让图片大小自动适应，在很大的屏幕也会显示完整的图片）
二、然后附加固定背景图的属性background-attachment: fixed
三、最后给这个元素加入一个高度height: 100%或者任意的高度height: 400px
就那么简单哦！不用怀疑，马上上代码，大家都可以自己去试试哦！
HTML
<div class="wrapper">
   <div class="parallax-img"></img>
   <p>这里填写一堆文字就可以了，尽量多一点哦</p>
</div>

CSS
.wrapper {
  height: 100wh;
}
.parallax-img {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  background-image: url("http://ppe.oss-cn-shenzhen.aliyuncs.com/collections/182/7/thumb.jpg");
}
p {
  font-size: 20px;
  padding: 1.5rem 3rem;
  min-height: 1000px; // 当你的文字内容不够，也能撑出足够的高度来看到效果，当然如果你文字足够多，就不需要了
}

如果想做到我动图里面一样的效果，或者想看是怎么实现的，可以查看下面总结里面的“预览实际效果”或者看“GitHub源码”。

🌟知识总结

background-attachment: fixed — 把背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
background-size: cover — 可以让图片大小自动适应，在很大的屏幕也会显示完整的图片。


预览实际效果 ｜ GitHub源码 ｜ 喜欢的童鞋 🌟star 一下谢谢


使用CSS + JavaScript


有些童鞋可能没有被这个震撼到或者还是觉得不够刺激。那我们再来一个高级例子，上面的例子在滑动的时候图片是固定死的。如果我们加上JavaScript的助力，我们可以让窗口的图片缓慢的跟随这个页面滑动，使得效果更有动力和更有冲击感。
实现理论

首先讲一下排版，因为我们需要在我们滑动页面的时候使用JavaScript偏移图片，所以我们需要给图片一个CSS属性让我们可以让图片可以根据一个速度来往上或者往下移动。这个例子里面我们让所有图片包裹在一个div里面，class名为block。这个div给予相对定位属性position: relative，这个时候我们就可以在里面加入图片，然后让图片绝对定位position: absolute在这个div盒子里面。
但是图片是可能很大的，我们需要把图片不超出我们定义个盒子，所以我们的div同时也给予了overflow: hidden和一个高度height: 100%。这样图片超出div盒子就会被隐藏。
布局代码如下：
<div class="block">
  <img
    src="https://unsplash.it/1920/1920/?image=1005"
    data-speed="-1"
    class="img-parallax"
  />
  <h2>视差速度 -1</h2>
</div>
<div class="block">
  <img
    src="https://unsplash.it/1920/1920/?image=1067"
    data-speed="1"
    class="img-parallax"
  />
  <h2>视差速度 1</h2>
</div>

html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: 'Amatic SC', cursive;
}
.block{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  font-size: 16px;
}
.block h2{
  position: relative;
  display: block;
  text-align: center;
  margin: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10vw;
  color: white;
  font-weight: 400;
}
.img-parallax {
  width: 100vmax;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%,0);
  pointer-events: none
}

实现这个布局，在你滑动的时候，图片是不会移动的。因为最后一步就是加入JavaScript的辅助，让图片活起来。
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
// 循环获取每一个图片元素
$(".img-parallax").each(function () {
  var img = $(this);
  var imgParent = $(this).parent();
  function parallaxImg() {
    var speed = img.data("speed"); // 获取每张图片设置了的偏移速度
    var imgY = imgParent.offset().top; // 获取图片盒子所在的Y位置
    var winY = $(this).scrollTop(); // 获取当前滑动到的位置
    var winH = $(this).height(); // 获取浏览器窗口高度
    var parentH = imgParent.innerHeight(); // 获取图片盒子的内高度

    // 浏览器窗口底部的所在位置
    var winBottom = winY + winH; 

    // 当前图片是否进入浏览器窗口
    if (winBottom > imgY && winY < imgY + parentH) {
      // 运算图片需要开始移动的位置
      var imgBottom = (winBottom - imgY) * speed;
      // 运算出图片需要停止移动的位置
      var imgTop = winH + parentH;
      // 获取从开始移动到结束移动的%（根据开始与结束像素 + 移动速度）
      var imgPercent = (imgBottom / imgTop) * 100 + (50 - speed * 50);
    }
    img.css({
      top: imgPercent + "%",
      transform: "translate(-50%, -" + imgPercent + "%)",
    });
  }
  $(document).on({
    scroll: function () {
      parallaxImg();
    },
    ready: function () {
      parallaxImg();
    },
  });
});
</script>


🌟知识总结

position: relative — 相对定位。
position: absolute — 绝对定位。
overflow: hidden — 如果需要，内容将被剪裁以适合填充框。 不提供滚动条。


预览实际效果 ｜ GitHub源码 ｜ 喜欢的童鞋 🌟star 一下谢谢


6. 裁剪图像的动画


在有CSS3之前裁剪图片实现也是颇有难度的。现在我们有了两个非常方便简单的CSS3属性可以实现裁剪，那就是object-fit和object-position, 这两个属性可以让我们改变图片的大小，但是不影响图片的长宽比。
当然我们可以使用图片处理工具或者使用JavaScript等插件来实现图片裁剪功能。但是因为有了CSS3的属性，我们不只可以裁剪，我们还可以用裁剪的属性来做图片的动态效果。
为了让我们的例子更加简单，我们这里使用了<input type="checkbox">复选框元素，这样我们就可以使用:checked的伪类来触发启动效果。所以在例子里面我们完全不需要JavaScript的协助。
实现原理：
一、首先给予图片一个宽高height: 1080px，width: 1920px。
二、然后用CSS选择器，锁定当input被选中后img标签的样式变化。当被选中时，给图片设定一个新的宽高，这里我们给宽高各自500像素：width: 500px，height: 500px。
三、然后我们加上了过渡效果和时间让图片改变宽高时有动画过渡效果：transition: width 2s, height 4s;。
四、最后加上object-fit: cover和object-position: left-top这两个属性来保持图片的宽高比例，这样就大功告成了！
我们来看看完成的代码：
勾选裁剪图片 <input type="checkbox" />
<br />
<img
  src="https://img-blog.csdnimg.cn/2020032122230564.png"
  alt="Random"
/>

input {
  transform: scale(1.5); /* 只是用来放大复选框大小 */
  margin: 10px 5px;
  color: #fff;
}

img {
  width: 1920px;
  height: 1080px;
  transition: 0s;
}

/* css选择器锁定复选框被选中时的状态 */
input:checked + br + img {
  width: 500px;
  height: 500px;
  object-fit: cover;
  object-position: left-top;
  transition: width 2s, height 4s;
}


🌟知识总结

object-fit — CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。
object-position — 用来切换被替换元素的内容对象在元素框内的对齐方式。
transition — 过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。


预览实际效果 ｜ GitHub源码 ｜ 喜欢的童鞋 🌟star 一下谢谢


7. 混合模式（Blend）


如果有使用过Photoshop的同学对blend混合模式应该是非常熟悉了，我们都知道混合模式是非常强大，也是p图时非常常用的一个功能。但是你们有没有想象过可以在浏览器的CSS中直接使用呢？对我们不需要设计师给我们做图，我们前端也可以实现混合模式了。
在CSS中我们不只可以对background背景加入混合模式，我们可以对任何一个元素的自带背景加入混合模式，让你可以做出很多之前没有想过的效果和排版。
往一个元素加入混合模式，我们只需要使用到一个CSS属性mix-blend-mode即可。
简单实现原理：
首先我们只需要加一个h1标题标签
<h1>混合模式：颜色减淡</h1>

然后我们给h1标签加入mix-blend-mode中的颜色减弱模式color-dodge，但是要注意的是我们需要给body和html加入背景颜色background: white，要不你会发现这个效果会无效。因为h1我们没有给颜色，会自动往上级继承，并且混合模式是针对背景颜色的过滤，所以body和html需要有背景颜色才行。
h1 {
   mix-blend-mode: color-dodge;
   font-family: yahei;
   font-size: 5rem;
   text-align: center;
   margin: 0; 
   padding: 20vh 200px;
   color: #D1956C;
 }

 html,
 body {
   margin: 0;
   background-color: white;
 }

 body {

   background-image: url(https://images.unsplash.com/photo-1505567745926-ba89000d255a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3302&q=80);
   background-repeat: no-repeat;
   background-size: cover;
   min-height: 100vh;
   overflow: hidden;
 }

换换背景图和h1标签的字体颜色就可以弄出各种不同的特效了。




🌟知识总结

mix-blend-mode — CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。


预览实际效果 ｜ GitHub源码 ｜ 喜欢的童鞋 🌟star 一下谢谢


8. 瀑布流布局

CSS Grid和Flexbox让我们可以更简便，更容易和更快的实现各式各样的响应布局，并且让我们快捷方便的在布局中实现横向剧中和竖向剧中。但是回想一下以前是颇为困难的。
虽然这些新出的布局方式可以让我们解决很多以前的布局难题，但是像瀑布流布局这种，就无法用它们简单来实现了。因为瀑布流一般来说都是宽度一致，但是高度是根据图片自适应的。并且图片的位置也是根据在上方图片的位置而定的。
其实最好实现瀑布流布局的办法就是用CSS的列属性套件，这套属性大多数都是用于排版杂志中的文本列。但是用于布局瀑布流也是特别实用哦。因为以前需要实现瀑布流，就必须有JavaScript的辅助来计算图片高度然后决定每张图片的定位和位置，所以现在有了列属性就可以使用纯CSS实现了。
实现原理：
实现这个布局，首选我们需要把所有的内容先包裹在一个div元素里面，然后给这个元素column-width和column-gap属性。
然后，为了防止任何元素被分割到两个列之间，将column-break-inside: avoid添加到各个元素中。
神奇的效果就完美实现了，零JavaScript。
我们来看看代码：
<div class="columns">
  <figure>
    <img src="https://source.unsplash.com/random?city" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?night" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?developer" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?building" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?water" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?coding" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?stars" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?forest" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?girls" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?working" alt="" />
  </figure>
</div>

.columns {
  column-width: 320px;
  column-gap: 15px;
  width: 90%;
  max-width: 1100px;
  margin: 50px auto;
}
.columns figure {
  display: inline-block;
  box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
  column-break-inside: avoid;
  border-radius: 8px;
}
.columns figure img {
  width: 100%;
  height: auto;
  margin-bottom: 15px;
  border-radius: 8px;
}


🌟知识总结

column-width — CSS属性建议一个最佳列宽。 列宽是在添加另一列之前列将成为最大宽度。
column-width — 该 CSS 属性用来设置元素列之间的间隔 (gutter) 大小。
column-break-inside — 设置或检索对象内部是否断。


预览实际效果 ｜ GitHub源码 ｜ 喜欢的童鞋 🌟star 一下谢谢


总结


我希望这8个前端小技巧和特效对大家有帮助，或多或少有吸收一点新的前端知识。这篇文章提到的内容，其实很多都是值得深挖和学习的。有一些例子我做的比较简单，但是其实是有无限的可能性。喜欢前端的童鞋们，让我们继续在前端领域中一起深挖，让我们的热爱无限的燃烧起来吧！

在最后我想给大家讲一下我对前端的热爱和态度。
回想前端这几年，发展真的是突飞猛进，从前端排版，HTML5+CSS3做H5页面，到前端组件化，各种UI框架满天飞。
一开始我随着热潮用起了UI框架，起初觉得特别方便，来一个新的项目就直接上一个UI框架，研发速度也非常快。但是久而久之就觉得前端开发变成了处理数据，对接接口，实现交互。
某天在阅览国外的一些前端设计和框架的时候，我突然发现国内多数的前端开发者都不再怎么使用CSS3做出一些很好玩的布局和特效了。现在市面上的系统和页面都是千篇一律，普遍都是用一些知名的UI框架搭建系统和APP，基本自己动手去排版已经少之又少。前端已不再是以前的前端，缺少了灵魂。
但是我们回想一下，我们刚刚开始学习前端的时候，让我们最有成就感，觉得前端特别有意思的那种感觉。就是那种让我们觉得神乎奇迹，不可思议的布局，特效和交互。那种感觉自己成功实现了很优美，很炫酷的页面和特效的感觉，让我们越做越来劲，越做越是兴奋。
但是在某些公司，研发部都是要求快速开发，UI设计部门也是受到时间的控制和限制，所以逐步走进了UI框架的限制之中。都是围绕这一些UI框架来设计和开发系统和应用。
作为一名热爱前端的开发者，我还是坚持在绝大多数的项目中，自己排版和实现页面交互特效。然后使用UI框架作为辅助，主要是用来减轻一些小组件和常用组建的快速实现。（可以说我是比较追求完美和外貌协会的程序员 😂）
推荐阅读

🔥《写给想学和在学编程的你们，学习编程的7个好处》 — 其实选择学编程是能改变人生的。可能起初很多人学编程，报了一个编程培训班，为了就是能拿到更高的工资或者有更好的工作环境。最后坚持着坚持着，最后会发现编程还会给我们带来很多个人能力和技能上的提升。
🔥《如何高效学习编程》 — 编程确实不是一件容易的事情，除了要有较强的逻辑思维，还需要花大量的时间和集中力来提升或者维持一定的高度。
🔥《5大法则助你 成为更出色的开发者》 — 这篇文章传授5大法则助我们成为更出色的开发者，在众多开发者中脱颖而出的诀窍，也会在我们的技术职业生涯中给我们很多的帮助。
🔥《用“易于改编”原则，提升编程水平，写出更好的代码》 — 无论新手还是资深开发者都会经常问一个问题，“怎么写好的代码？”，要知道怎么写好代码，首先我们要知道怎么样才是好的代码。要有明确的目标，才能知道如何达成目标。在《程序员修炼之道》中提到的“ETC Principle” – 易于改编原则。这个原则看似简单，但是我们越是深入思考越是觉得“简约而不简单”。

收起

展开全文

前端工程师的修真秘籍（css、javascript和其它）

万次阅读 多人点赞 2014-05-05 11:02:24

以我的经验，大部分技术，熟读下列四类书籍即可。入门，用浅显的语言和方式讲述正确的道理和方法，如head first系列全面，巨细无遗地探讨每个细节，遇到疑难问题时往往可以在这里得到理论解答，如Definitive ...

以我的经验，大部分技术，熟读下列四类书籍即可。

入门，用浅显的语言和方式讲述正确的道理和方法，如head first系列
全面，巨细无遗地探讨每个细节，遇到疑难问题时往往可以在这里得到理论解答，如Definitive Guide/Programming xx系列
实践，结合实际中经常遇到的情景环境，来描述如何设计和解决问题，如cookbook系列
深入，讲解一些文化，思路，甚至于哲学上的东西，真正做到深入一种语言去编程，如unix编程艺术，程序员修炼之道等等

那么，目前为止我认为最好的书是：

css：

入门： Head First HTML and CSS, XHTML （中文版，第二版）这本2005年底的书依然是最易懂，清晰和正确的入门读物，去看看amazon排名就知道了
全面： CSS, The Definitive Guide (3th Edition) （《CSS权威指南(第3版)》）Meyer可能是css领域最权威和知名的作者，他在这本书里讲解了每个细节的实现和原理，更详细的东西恐怕只能从w3c那几乎不可读的文档中去寻找了
实践：CSS Mastery (2th Edition) （《精通CSS:高级Web标准解决方案(第2版)》）Andy budd恐怕是英国最出色的css作者，这本书用简单直接的方式论述了很多实践中组件的正确实现以及可替代方法，包括css3
深入：很遗憾，css在这方面还没有一本必读著作，也可能并不需要，因为到了这个程度，多是用户体验和视觉设计了，目前最接近的是 Transcending CSS （《超越CSS:Web设计艺术精髓(修订版) 》）, 但不断的技术进化使得书中某些部分感觉有些落伍。

关于css3, 她是一个模块化的渐进式增强，且以2.1为基础，因此，请学好css2再学习css3，这方面我认为只需要一本实践书即可，告诉你css3能做到什么，毕竟，原理是共通的。

The Book of CSS3 推荐这本，一个技术人员写的组织清晰的css3模块描述和实践指南，还包括浏览器的实现情况，2011年5月出版，是目前为止最好的。

javascript:

入门：Eloquent Javascript 一位hacker写的编程入门，书中向hacker，open source, free software的欣赏和痴迷比比皆是，比如官网下边那个向emacs致敬的console。作者很聪明，这本书的目标读者，beginners, 是不会因为这些小细节而向他叫好的。他想要的，只是把在其中浸淫多年的，真正意义上的编程精神，传达给初学者们而已。少见地打败了对应的HeadFirst系列（Headfirst Javascript)
全面：Javascript, The Definitive Guide(6th edition) （《JavaScript权威指南(第6版)》）伴随我们web开发者成长的一本javascript圣经，一直以来都是无可争议的最好与最全面的js书籍，2011年出版了最新版。
实践：在目前的web开发环境中，我们都是在使用各种js框架，很少自己写框架来开发，因此这本书的位置，应该留给你所使用的框架。如果是jquery，我推荐 Jquery: Novice to Ninja （《JQUERY从菜鸟到忍者(第2版) 》）这本，框架方面的书，经常一本入门的就够了，因为更新实在太快，之后的研究学习只能全靠网络了。
深入：与css不同，js是一种真正的编程语言，所以对他的深入研究是一个长期的过程，css的深入更偏向技艺/工匠，而js更偏向设计/架构/艺术，我推荐以下几本从不同方面深入js的书，他们都是业界最顶级的js开发团队（yahoo）的成员和同事，因此思路是很统一的，著名的高性能网站建设指南1和2都出自这个团队。

Javascipt, The Good Parts （《JavaScript语言精粹(修订版) 》）由JSON的发明者撰写
Javascript Patterns （《JavaScript模式》）YSlow的合作开发者撰写
High Performance Javascript 最好的zakas的书，虽然我不太喜欢他

附上一些即将出版，我非常想看的书，有先睹为快的朋友可以分享一下心得:

Secrets of Javascript Ninja （好像没有中文版）Jquery作者John Resig最新著作
Node: Up and Running 认识一下流行的no-block js server
Javascript Web Applications （《基于MVC的JavaScript Web富应用开发》）这本号称是对当下js landscape的总结

收起

展开全文

it html json jquery

CSS设置背景透明度

万次阅读 多人点赞 2018-04-16 09:05:53

实现透明的css方法通常有以下3种方式，以下是不透明度都为80%的写法：css3的opacity:x，x 的取值从 0 到 1，如opacity: 0.8css3的rgba(red, green, blue, alpha)，alpha的取值从 0 到 1，如rgba(255,255,255,0.8)IE...

实现透明的css方法通常有以下3种方式，以下是不透明度都为80%的写法：

css3的opacity:x，x 的取值从 0 到 1，如opacity: 0.8

css3的rgba(red, green, blue, alpha)，alpha的取值从 0 到 1，如rgba(255,255,255,0.8)

IE专属滤镜 filter:Alpha(opacity=x)，x 的取值从 0 到 100，如filter:Alpha(opacity=80)

一、css3的opacity

兼容性：IE6、7、8不支持，IE9及以上版本和标准浏览器都支持

使用说明：设置opacity元素的所有后代元素会随着一起具有透明性，一般用于调整图片或者模块的整体不透明度

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景透明度</title>
<style>
.demo{
  padding: 25px;
  background-color:#000000;
  filter:alpha(opacity:50); opacity:0.5;  -moz-opacity:0.5;-khtml-opacity: 0.5;
}
.demo p{
    color: #FFFFFF;
}
</style>
</head>
<body>    

<div class="demo">
    <p>背景透明，文字也透明</p>
</div>
</body>
</html>

使用opacity后整个模块都透明了，展现如下：



那么使用opacity实现《背景透明，文字不透明》是不可取的。

二、css3的rgba

所谓RGBA颜色，顾名思意就是R+G+B+A的颜色，再具体点就是red+green+blue+alpha的颜色，翻译一下就是红+绿+蓝+Alpha透明的颜色。

 


background:rgba(200, 54, 54, 0.5);



其中，表示半透明度的0.5前面的0是可以省掉的，直接.5也是可以的。

兼容性：IE6、7、8不支持，IE9及以上版本和标准浏览器都支持

解决IE8浏览器不支持rgba的方法：

 

background:rgba(0,0,0,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);

使用说明：设置颜色的不透明度，一般用于调整background-color、color、box-shadow等的不透明度。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3的rgba</title>
<style>
.demo{
  padding: 25px;
  background-color:#000000;/* IE6和部分IE7内核的浏览器(如QQ浏览器)下颜色被覆盖 */
  background-color:rgba(0,0,0,0.2); /* IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂，但解析为透明 */
}
.demo p{
    color: #FFFFFF;
}
</style>
</head>
<body>    
<div class="demo">
    <p>背景透明，文字也透明</p>
</div>
</body>
</html>

在background-color中使用rgba，标准浏览器中，背景透明，文字不透明，展现如下：



那么使用rgba实现背景透明，文字不透明是可取的。

收起

展开全文

CSS控制文字，超出部分显示省略号
万次阅读 多人点赞 2018-06-25 14:34:04
CSS控制文字，超出部分显示省略号http://www.daqianduan.com/6179.html <p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> 如果实现单行文本的...
收起
最全CSS基础知识图片形式整理
万次阅读 多人点赞 2019-07-14 12:39:30
额外的CSS冷门实用小技巧： calc()可以计算宽度高度。注意的是calc的参数中间的计算符号的前后要加空格。例如：width: calc(100% - 100px); object-fit:cover; —改变图片根据容器自适应 ...
收起
css1 css2 css3 区别
千次阅读 2018-02-10 13:28:16
但自从CSS1的版本之后，又在1998年5月发布了CSS2版本，样式单得到了更多的充实。 CSS2.0提供给我们了一个机制，让程序员开发时可以不考虑显示和界面就可以制作表单和界面，显示问题可由美工或是程序员...
收起
纯 CSS 实现图片轮播
万次阅读 多人点赞 2018-05-27 13:07:32
CSS3 animation 属性和 @keyframes 规则主体思想准备相同大小的多个图片将要展示图片横排放在一个图片容器里面在图片容器外再加一个展示容器，展示容器大小为图片大小给图片容器添加自定义动画，在动画...
收起
图片轮播 animation keyframes
CSS Modules介绍
万次阅读 2019-08-04 10:36:22
技术面的时候被人家问到了CSS Module有了解过么，我说没有了解过，他就继续问到，那你在平时开发的时候给组件和元素起类名要怎么办呢？我说给元素和组件加指定前缀，这样就能够保证自己写的类名和其他同事写的类名...
收起
5分钟用CSS实现毛玻璃效果 CSS Glassmorphism
千次阅读 多人点赞 2020-12-23 12:47:34
2.1CSS calc() 函数 2.2 CSS var() 函数 2.3 backdrop-filter 2.4 CSS3box-sizing属性 2.5 实现思路 3 参考代码 3.1 HTML 3.2 CSS 1 视频视频地址：https://www.bilibili.com/video/BV1Ny4y1U7hp 5分钟...
收起
HTML+CSS初级入门
万人学习 2017-07-22 13:34:05
本课程主要目标是教给大家： 1）HTML和CSS能干什么？ 2）HTML和CSS是什么？...3）HTML和CSS怎么用，这里会讲解常用到的HTML和CSS的使用规则 4）一步一步开发一个响应式的页面 QQ交流群：659123270
收起
css常用代码大全,html+css代码
万次阅读 多人点赞 2017-12-28 21:24:46
css常用代码大全，html+css代码 html+css可以很方便的进行网页的排版布局，还能减少很多不必要的代码。一.文本设置 1、font-size: 字号参数 2、font-style: 字体格式 3、font-weight: 字体粗细 ...
收起
css 背景图片自适应属性整理
万次阅读 多人点赞 2019-06-25 19:36:42
本篇博客主要记录一些使用 css 对背景图片自适应的操作整合背景图片取消重复 background-image: url(image.jpg); background-repeat:no-repeat; 修改前修改后背景图片固定（不会随着内容滚动而改变位置） ...
收起
vscode css错误提示{ expected css(css-lcurlyexpected)
千次阅读 2020-07-09 16:45:53
如果是在vue中使用less或者sass, css错误提示{ expected css(css-lcurlyexpected) 查看右下角的语言是不是Vue 如果不是，需要改成Vue
收起
sass less 前端
CSS 元素垂直居中的 6种方法
万次阅读 多人点赞 2012-05-30 09:56:06
转自：http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84-6%E7%A7%8D%E6%96%B9%E6%B3%95/利用CSS进行元素的水平居中，比较简单，行级元素设置其父元素的...
收起
html div table float
CSS 参考手册
万次阅读 2019-06-28 22:54:42
https://www.runoob.com/cssref/css-reference.html
收起
html+css入门
万人学习 2018-05-15 12:22:07
本课程是专门为初级量身定制的入门课程，我们不讲学了以后就年薪几十万的鸡汤，也不拿成功学员说事情，我们只讲干货，我们把知识点...2.css入门 3.div+css布局 4.css选择器加强 5.百度云下载页实战 6.表格 7.表单
收起
CSS好玩关键字记录
万次阅读 2019-03-13 19:01:04
1. currentColor —— 一个会根据自身（或父级元素）的css属性color决定对应的色值；关于兼容性兼容主流浏览器、IE9+以及IE5。
收起
前端
css的两种盒模型
万次阅读 多人点赞 2018-03-24 15:15:34
初学 css 的时候 div 的一些宽高问题经常会引起一些不好理解的问题，这里做一个关于css盒模型的分享。问题下面的代码可以直接复制出去运行哦 <!DOCTYPE html> <...
收起
盒模型前端面试题
CSS各种对齐代码，左对齐、右对齐、中间对齐、底部对齐、两端对齐等，代码简单
万次阅读 多人点赞 2017-03-13 21:48:51
CSS各种对齐代码，左对齐、右对齐、中间对齐、底部对齐、两端对齐等，代码简单 /*CSS代码：*/ /*左对齐*/ .left { text-align: left; border: 1px dotted black; width: 50%; } /*右对齐*/ .right { text-...
收起
E01 -- CSS样式中报错 { expectedcss(css-lcurlyexpected)
千次阅读 2020-05-11 17:11:33
{ expectedcss(css-lcurlyexpected) 我发现这个错误是在使用rem布局的时候：使用less样式生成css文件中，css文件报错：发现错误发现我在媒体布局中没有写元素：导致字体大小不知道是给谁设置的导致生成css错误...
收起
css和css3的区别
千次阅读 2018-04-27 09:05:13
什么是CSS？CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。CSS 是一种标记语言，属于浏览器解释型语言，可以直接由浏览器执行，不需要编译。CSS 是用来表现HTML或XML的标记语言。CSS 是由W3C的CSS工作组发布...
收起
HTML
css 识别屏幕大小自适应
万次阅读 2017-12-19 11:20:54
表示当屏幕大于320px，并小于1156px是执行下面的css @media screen and (min-width: 320px) and (max-width: 1156px){ .site-bg-dl { position: fixed; height: 100%; widt
收起
CSS梅兰商城项目实战
万人学习 2016-03-17 17:13:25
本套CSS项目实战课程为制作梅兰商城首页，以网页布局定位的基础知识为依托，灵活运用CSS的全部知识和小技巧，带你深入剖析经典网页的制作过程，同时涉及到了CSS样式的初始化、版心控制、精灵图的使用、搜索引擎优化...
收起
CSS样式学习
千次阅读 2020-05-01 14:15:23
CSS样式学习 1.css概述 css（cascading style sheet）:是一种层叠样式表语言 css的作用是修饰HTML页面，设置html元素的样式，让HTML页面更加好看。 css样式能写在html文件中，css的存在就是修饰HTML。 html中使用css...
收起
CSS详解（1.什么是css）
千次阅读 2020-01-17 10:41:03
目录一，优势二，学习要点 CSS是层叠样式表（Cascading Style Sheets）的...W3C自1996年12月发布第一个CSS正式推荐版CSS 1.0以来，一直在对CSS标准进行修订、升级。1999年1月，CSS 2.0 正式推荐版发布，增加了对其它...
收起
html java
css 强制不换行
万次阅读 2019-03-11 22:41:10
css中强制不换行，文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。 white-space:nowrap;
收起
HTML5+CSS3 精美登陆界面源码
千次下载 热门讨论 2016-01-19 09:52:44
3个很精美的登陆界面，全都是用HTML5+CSS3开发的，所以可能不适合低版本IE浏览器。大家可以下来看看，做的超级漂亮的。
收起
CSS 加粗(css font-weight)
千次阅读 2019-08-21 20:43:48
CSS 加粗(css font-weight) CSS 加粗知识与CSS加粗实例 DIV+CSS基础知识 CSS 加粗这里指的是通过DIV CSS控制对象的加粗。使用CSS属性单词 font-weight 对象值：从100到900，最常用font-weight的值为bold font-...
收起

HTML(css+div)登录界面

细说CSS(CSS+CSS3)

前端必看的8个HTML+CSS技巧

文章目录

1. 固定底部内容

2. 悬停放大图片特效

3. 瞬间黑暗模式

🌓 Darkmode.js

4. 自定义列表符号

5. 图片视差效果

仅使用CSS

使用CSS + JavaScript

6. 裁剪图像的动画

7. 混合模式（Blend）

8. 瀑布流布局

总结

推荐阅读

前端工程师的修真秘籍（css、javascript和其它）

CSS设置背景透明度

二、css3的rgba

CSS控制文字，超出部分显示省略号

最全CSS基础知识图片形式整理

css1 css2 css3 区别

纯 CSS 实现图片轮播

CSS Modules介绍

5分钟用CSS实现毛玻璃效果 CSS Glassmorphism

HTML+CSS初级入门

css常用代码大全,html+css代码

css 背景图片自适应属性整理

vscode css错误提示{ expected css(css-lcurlyexpected)

CSS 元素垂直居中的 6种方法

CSS 参考手册

html+css入门

CSS好玩关键字记录

css的两种盒模型

CSS各种对齐代码，左对齐、右对齐、中间对齐、底部对齐、两端对齐等，代码简单

E01 -- CSS样式中 报错 { expectedcss(css-lcurlyexpected)

css和css3的区别

css 识别屏幕大小自适应

CSS梅兰商城项目实战

CSS样式学习

CSS详解（1.什么是css）

css 强制不换行

HTML5+CSS3 精美登陆界面源码

CSS 加粗(css font-weight)

sadfs珠海

软件测试基础

算法导论二（排序和顺序统计量）——编程大牛的必经之路

Numpy库

c++学习资源.zip

02_ARM架构初探

Scratch编程等级考试二级真题讲解（电子学会图形化编程）

数据结构 基于字符串模式匹配算法的病毒感染检测问题

Numpy学习笔记(二):argmax参数中axis=0,axis=1,axis=-1详解附代码

关于自主开发和研究代码

转行做IT-第9章 常用类-Scanner、Random等

python学习小记与问题记录（一）

一种基于音频信道传输数字定位数据的设计

类加载器的分类

Linux 挂载超过2.2T硬盘方法

CEN/TS 17287:2019 Requirements and test methods for electronic cigarette devices

超宽带盘锥天线的分析与设计

application.properties

UnitySocket异步聊天室

基于Django的电子商务网站设计--第二章

E01 -- CSS样式中报错 { expectedcss(css-lcurlyexpected)

数据结构基于字符串模式匹配算法的病毒感染检测问题

转行做IT-第9章常用类-Scanner、Random等