1.两侧固定，中间自适应 .box{ width: 100%; display: flex; height: 300px; } .left{ width: 100px; height: 200px; background-color:red; } .right{ width: 100px; height: 200px; backgrou
1. 水平居中(margin: auto;)子父元素宽度固定，子元素上设置 margin: auto; 子元素不能设置浮动，否则居中失效。 #div1{ width: 300px; height: 300px; border: 1px solid red; } #div1 p { width: 100px;
使用jq 实现动画循环效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-
行内元素： 父级元素是块级元素：父元素设置text-align:center 1.元素水平居中 margin: 0 auto;谁居中，谁设置 居中不好使的原因： 1、元素没有设置宽度，没有宽度怎么居中嘛！ 2、设置了宽度依然不好使，你设置的是行内元素吧 实例1： <div class="box"> <div class="content">
文章目录Python前端前端第一部分1 网站建站的流程2 网页的组成部分3 html基础3.1 什么是网页？3.2 什么是网站？3.3 什么是html?3.4 什么是xhtml3.5 HBuilder开发工具3.6建立站点3.7 html文档的基本结构3.8 网页的调试工具第一个网页01文本操作02列表03超链接和图片04块标签05d
学习后 做了一个练习 就是简单的点击按钮 切换图片和字 哎哟 这个布局 浪费这个事件 就是 PHP后端写了一个结果集 前端 点击按钮 通过Ajax 获得然后前台做处理 很简单 的一个小功能 不要因为功能简单小就不做 很多复杂的功能都是一个个小功能的超集合 AJax 就是自己写的
方式一：浮动 方式二：定位 方式三：flex 方式四：表格布局 方式五：grid网格布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三栏布局几种实现方式</title> <style> *{ padding: 0;
话不多说直接上代码 html代码统一如下： <div class="wrap"> <div class="inner"> innerBox </div> </div> css代码统一如下： 定位方法A position + relative + absolute .wrap { width: 300px; height: 300px; backgroun
[已知宽高] 已知宽高 [父元素相对定位,子元素绝对定位 top left margin-top margin-left] .box { position: relative; width: 300px; height: 300px; border: 1px solid #000; } .center { back
盒子阴影 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>盒子阴影</title> <style> .box { width: 200px; height: 200px; background-color: orange;
常见自适应布局有两种：左侧固定右侧自适应、左右两侧固定中间自适应 左侧固定，右侧自适应 1、子元素 float:left // html部分<div class='container'> <div class="left">左侧固定</div> <div class="right">右侧自适应</div></div>// css部分.container{ positi
1.导入两个js的库 jquery 和 unslider 2.在html中引用 （不同版本） <script type="text/javascript" src="../js/jquery-1.11.1.min.js" ></script> <script type="text/javascript" src="../js/unslider.min.js"></script>
解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果 一、前言 最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的，但是想要找到可以运行的代码还是比较困难的，最近突然想起就在网上汇总了一些这样的代码。 二、3D效果代码 2.1、旋转相册 <!doctype html><ht
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 300px;
<img src ="..." alt="" > html标签分三种 block：块级元素（div）多个div会换行显示，可以设置宽高； inline：行内元素（span）多个span会在一行显示，不能设置宽高； inline-block：行内块元素（img）多个img会在同一行显示，可以设置宽高。 图片垂直居中1： <style type="text/css"> div{width: 300p
常见的布局方式: float布局、Position定位、table布局、弹性(flex)布局、网格(grid)布局 那么我们就是用以上5种方式完成三栏布局，不过前提是左右宽度(假如左右宽度为300px),整个高度已知(假如高度为100px)，中间宽度自适应 1、float布局: float最初的设计的初衷是为了解决文字
任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。如下图所示： 在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素
1、元素水平居中 当然最好使的是： margin: 0 auto; 居中不好使的原因： 1、元素没有设置宽度，没有宽度怎么居中嘛！ 2、设置了宽度依然不好使，你设置的是行内元素吧，行内元素和块元素的区别以及如何将行内元素转换为块元素请看我的另一篇文章！ 示例 1： <div class="box"> <div class="c
推荐学习链接：css盒模型 1、盒模型的常用属性 1.1、pading <html lang="en"><head> <meta charset="UTF-8"> <style> #box{ width: 200px; height: 200px; background-color: red; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>点名器</title> <style> *{ margin:0; padding:0; } body { background-image: lin
读心术小游戏 主要用到知识点 css3 2d转换 与过渡 css 使用less display:grid 布局 repeat()方法 fr单元是允许你用等分网格容器剩余可用空间来设置（简单来说就是占容器的几份） 效果图 html： <div class="wraper"> <div class="left"> <div class="board">
padding设置和清除 标签（空格分隔）： padding padding介绍： padding：就是内边距的意思，它是边框到内容之间的距离； 另外padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样。也就是说background-color这个属性将填充所有的border以内的区域； 如下代码;观察一下padding <!DOCTYPE h
/*dpr比值为1的css代码 */ div{ width:300px; height:200px; background:url(img/button@1x.png) ; } /* dpr比值为2的css代码 */ @media screen and (-webkit-device-pixel-ratio: 2) { div{ width:300px; height:200px;
web浏览器兼容性问题及解决方法 第一类：块状元素float后，有添加了横向的margin，在IE6下比设置的值要大（属于双倍浮动的bug） 解决方案：给float标签添加display：inline，将其转换为行内元素 第二类：表单元素行高不一致 解决方案：给表单元素添加float：left（左浮动）；或者是vertical-align：middle；（垂直
一、分别尝试使用 float、position、flex 实现如下需求 1.实现一个两栏布局，左侧占百分之三十宽度，右侧占百分之七十宽度 DOM结构： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>try</title> <link rel="stylesheet&q
