自己用自己电脑做网站空间wordpress注册美化

自己用自己电脑做网站空间,wordpress注册美化,郑州网站建设大华伟业,页面设计教程ok啊朋友们#xff0c;咱们的教程不知不觉以及来到了第六节#xff0c;所有说呢#xff0c;以后的难度#xff0c;会建立在前面的基础上#xff0c;所以没有看过的朋友们我建议那么看一下#xff0c;当然如果来大神了#xff0c;算我没说。那么我们就开始这一章的学习。…ok啊朋友们咱们的教程不知不觉以及来到了第六节所有说呢以后的难度会建立在前面的基础上所以没有看过的朋友们我建议那么看一下当然如果来大神了算我没说。那么我们就开始这一章的学习。一css3中的阴影我们为了让我们的网页更加的好看更加的赏心悦目所以我们要学习更多的关于css的内容那么我们先来看一下阴影部分。所谓的阴影就是为了让我们的网页的文字显示的更加的真实。也可以增加文本以及元素的立体感。1.盒子阴影盒子阴影顾名思义就是给盒子设置阴影我们可以设置盒子阴影的偏移量模糊半径扩散半径以及演示盒子的方向其语法格式如下box-shadow:inset offset-y blur-radius spread-radius color;其中各个参数的详细描述如下inset:是一个可以选择的关键字用于指定阴影向外还是向内。默认情况下阴影是向外的如果我们写了inset那么阴影就是向内的。offset-x和offste-y:这两个是必需的长度值用于指定阴影的水平以及垂直的偏移量。正值表示阴影在元素的右边或者下边反之则相反。如果两个值都是0那么阴影在元素的后边。blur-radius:这是一个可选的长度值用于指定阴影的模糊半径值越大阴影越模糊反之则清晰。需要注意该值不能为负值。该值为0时阴影的边缘则越锐利。spread-radius:该值也是一个可选的长度值用于指定阴影的扩散半径。正值表示阴影扩大反之则缩小。默认值为0的时候阴影与元素一样大。color:这个应该不用解释就是颜色用于指定阴影的颜色默认是黑色下面我们通过一个演示来看一下示例代码!DOCTYPE html html head meta charsetutf-8 title/title style typetext/css div{ width: 100px; height: 100px; background-color: yellow; box-shadow: 10px 10px 5px 5px grey; } /style /head body div/div /body /html我们在css中先设置了一个盒子模型然后我们为盒子设置阴影的水平偏移量垂直偏移量模糊距离以及阴影的颜色。2.文字阴影文字阴影顾名思义就是为文字加上阴影让我们的文本文字看起来更加的立体。当然我们也可以像盒子模型阴影设置阴影的偏移量模糊半径颜色。语法格式如下:text-shadow:offset-x offset-y blur-radius color;这几个的值与盒子模型解释差不多这里我就不就行解释了。不过我们需要注意的是我们可以在同一个文本中设置多个文字阴影只需要通过逗号分隔开就可以了多个阴影的层叠顺序是从前往后也就是说后面的阴影会覆盖前面的阴影。我们现在通过一个示例来看一下示例代码!DOCTYPE html html head meta charsetutf-8 / title/title style h1{ font-size: 36px; text-shadow: 2px 0.125rem red,2px 5px yellow; } /style /head body h1简单的小阴影/h1 /body /html我们在这里设置了两个阴影我们可以看到红色的阴影覆盖在黄色的阴影上面。(二)CSS3中的渐变属性我们为了让我们的网页变得更好看我们可以加一些渐变其中CSS3的渐变属性包括线性渐变径向渐变和重复渐变。1.线性渐变线性渐变指的是第一个颜色沿着一条直线按顺序过度到第二种颜色就是验证某条直线朝一个方向产生渐变效果。语法格式如下background-image:linear-gradient(direction,color1,color2);其中direction指的是渐变角度详细值我们我们可以看下边to top: 从下到上渐变相当于角度值等于0°to right:从左到右进行渐变相当于角度90°to bottom: 从下到上渐变相当于180°to left: 从左向右进行渐变相当于270°to top right: 从左下角向右上角进行渐变相当于45°to top left: 从右下角向左上角进行渐变相当于315°to bottom right: 从左下角向右下角进行渐变相当于135°to bottom left: 从右下角向左下角进行渐变相当于225°另外颜色节点在取值的时候可以是颜色值表示在此区域平均发布颜色也可以在颜色值后面加百分比表示色标在渐变线上的位置其中0%表示起点100%表示终点。现在我们通过一个示例来看一下示例代码!DOCTYPE html html head meta charsetutf-8 title/title style #rb { background-image: linear-gradient(to bottom, red, yellow); float: left; } #hz{ background-image: linear-gradient(to top, yellow, red); float: right; } #bz{ background-image: linear-gradient(to top, blue, red); } /style /head body div idrb stylewidth: 100px; height: 100px;/div div idhz stylewidth: 100px; height: 100px;/div div idbz stylewidth: 300px; height: 100px;/div /body /html2.径向渐变径向渐变指的是由中心点向外进行辐射的颜色过度。要创建一个径向渐变必须至少指定两个色标即想要过度的颜色。也可以指定渐变的形状以及位置其中省略时表示圆形中心渐变。其中语法格式如下background-image:radial-gradient(shape at position,color1,color2);其中radial-gradient表示径向渐变shape参数用于定义渐变的形状其中详细的可以看下面circle: 圆形渐变ellipse: 椭圆形渐变默认值像素值/百分比:定义水平半径和垂直半径的像素值如100px50px则表示水平半径为100px垂直半径为50px的椭圆形。如果两个数值相同则就是圆形。当然也可以使用百分比进行表示。position参数定义了渐变中心点的位置详细值如下left:左边right:右边top:上边bottom:下边center:中心(默认值)像素值:相当于左上角的水平或者垂直偏移量百分比:相当于左上角的水平或者垂直的百分比我们通过一个示例来看一下示例代码!DOCTYPE html html head meta charsetutf-8 title/title style #hp{ background-image: radial-gradient(red ,blue); text-align: center; } /style /head body div idhp stylewidth: 100px; height: 100px; uuu /div /body /html3.重复渐变在CSS3中重复渐变包括重复线性渐变以及重复径向渐变。1.重复线性渐变重复线性渐变指的是由线性渐变的一部分重复填充的图像其中语法格式如下background-image:repeating-linear-gradient(direction,color1,color2);参数与线性渐变一样示例示例代码:!DOCTYPE html html head meta charsetutf-8 title/title style typetext/css div { width: 200px; height: 200px; margin: 10px; float: left; } #div1 { background-image: repeating-linear-gradient(45deg, blue 20%, red 30%); } #div2 { background-image: repeating-linear-gradient(to left top, blue 20%, red 40%); } /style /head body div iddiv1/div div iddiv2/div /body /html2.重复径向渐变重复径向渐变指的是由径向渐变的一部分重复填充的图像其中语法格式如下background-image:repeating-radial-gradient(shape at position,color1,color2);其参数与径向渐变相同,接下来我们来看一下示例示例代码!DOCTYPE html html head meta charsetutf-8 title/title style typetext/css div{ width: 200px; height: 200px; margin: 10px; float: left; } #div1{ background-image: repeating-radial-gradient(at left top, blue 10%, yellow 30%); } #div2{ background-image: repeating-radial-gradient(yellow 10%, red 30%); } /style /head body div iddiv1/div div iddiv2/div /body /html需要注意的是重复渐变的颜色值需要加百分比表示颜色的长度。如果没有长度值则无法实现重复渐变效果。(三)CSS3圆角边框在CSS中我们可以使用圆角可以使我们的网页元素的边缘更加的圆润增强视觉的吸引力。CSS3的圆角边框是一种给元素的边框或者背景添加的圆角的样式属性可以使元素的外观更加的美观和自然。CSS3的圆角边框用border-radius进行设置。其语法格式如下border-radius:value1,value2,value3,value4;其中value是一个长度值我们经常使用px进行作为一个单位当然我们也可以使用百分比来进行设置。如果我们只填写一个值那么就表示四个圆角的弧度相同。如果我们指定两个值那么就是表示左上角与右下角为第一个右上角与左下角是第一个值。如果我们指定三个值那么表示左上角的弧度为第一个值右上角与左下角的弧度为第二个值右下角的弧度为第三个值如果指定四个值那么表示四个弧度值按照左上右上右下左下。进行分布当然我们在为border-radius取值的时候我们也可以给水平和垂直半径设置不同的值其格式为value1/value2。其中value1表示水平半径value2表示垂直半径。那么下面我们通过一个示例来看一下示例代码如下:!DOCTYPE html html head meta charsetutf-8 title/title style typetext/css .border-radius{ width: 200px; height: 200px; background: lightblue; margin: 20px; border-radius: 15px 50px 30px 5px; } /style /head body div classborder-radius/div /body /html(四)CSS3的过渡、变形、动画我们在网页中添加过度以及动画。会让我们的网页的动态的地方看起来更加的生动。也可以带给用户更好的体验。1.CSS3的过渡在CSS3中过渡得很好是一种人元素的样式在一定的时间内平滑地从一个状态转换到另一个状态的效果。其中详细的属性transition-property:指的是要进行过渡动画的CSS属性比如:color,width,transform等等。transition-duration:指定过渡动画持续的时间经常使用s或者ms作为单位。transition-timing-function:指定动画的速度曲线.transition-delay:指定过渡动画的延迟时间通常的单位也是s/ms。transition:复合属性按transition-property duration timing-function delay属性来进行设置1.transition-property属性其中语法格式如下transition-property:none|all|property;详细的属性解释如下none:表示没有任何属性会有过渡效果all:表示全部的元素都会获得过渡效果property:表示指定过渡效果的CSS属性的名称如果有很多的名称需要使用逗号进行隔开如下transition-property:width,height,....;当然如果我们省略那么所有的属性都将获得过渡2.transition-duration属性语法格式如下transition-duration:time;这个属性主要用来指定过渡动画的持续时间其中time属性表示过渡时间单位是s/ms3.transition-timing-function属性语法格式如下:transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out;这个属性呢主要用于指定过渡动画的速度曲线其中详细的属性如下linear:从开始到结束以相同的速度进行过渡ease:从慢速开始然后逐渐加快再慢速结束过渡效果ease-in:以慢速开始然后逐步加快的过渡效果ease-out:以慢速结束的过渡效果ease-in-out:以慢速开始和结束的过渡效果4.transition-delay属性语法格式如下transition-delay:time;该属性规定它过渡从什么时候开始其中属性值可以是负值也可以是正值和0下面我们来看一下区别负值:过渡动作会从该时间点出发之前的动作会被截断正值:过渡延迟触发0:表示立即执行其中默认值是0单位和duration一样那么下面我们通过一个示例来看一下CSS3的过渡示例代码!DOCTYPE html html head meta charsetutf-8 title/title style typetext/css .transition{ width: 200px; height: 100px; background-color: blue; border-radius: none; transition-property: width background-color,border-randius; transition-duration: 3s; transition-delay: 0s ,1s; } div:hover{ background-color: blueviolet; border-radius: 15px 50px 30px 5px; } /style /head body div classtransition/div /body /html这里呢我们使用了上一个CSS中的圆角边框做了一个变化效果。2.CSS3中的变形在CSS3中我们可以利用transform功能实现文字或者图片的旋转、缩放、倾斜、移动、变形功能当然除了transform属性外我们也可以结合其他的属性实现更加丰富的效果。其中语法格式如下transfoem:none|transform-function其中transform属性的默认值为none,表示不变形。transform-function属性用于设置我们的变形函数可以是一个或者多个变形函数列表。其中常见的函数如下translate():用于移动元素的位置像数学中的xy坐标轴我们需要设置xy两个值用于设置xy向的偏移量。scale():用于改变元素的大小我们也需要设置两个值也就是xy的的缩放比例。skew():用于设置倾斜元素的形状这里我们也需要设置两个值表示xy的倾斜角度。rotate():用于旋转元素的角度这个我们只需要设置一个值就可以也就是顺时针的选择角度。1.移动函数translate()translate()函数用于元素位置的移动其语法格式如下transform:translate(x,y);其中x和y表示沿着x和y轴进行移动向上和左进行移动为负向下和右移动为正。我们来通过一个示例来看一下示例代码!DOCTYPE html html head meta charsetutf-8 title/title style typetext/css div{ width: 100px; height: 100px; background-color: blue; border: 1px solid black; color: red; margin: 30px auto; } .tanslate:hover{ transform: translate(100px ,40px); } /style /head body div classtanslate/div /body /html2.缩放函数scale()scale()缩放函数可以实现元素的放大以及缩小其语法格式如下transform:scale();其中xy表示的是宽度以及高度的缩放比例其取值大于1表示放大取值小于1的到时候表示缩小。也可以取负值表示先翻转再放大或者缩小下面我们通过一个示例来看一下示例代码!DOCTYPE html html head meta charsetutf-8 title/title style typetext/css div{ width: 100px; height: 100px; background-color: aqua; margin: 50px auto; } #scale:hover{ transform:scale(2,-2); } /style /head body div idscaleyanjikang/div /body /html这样我们就实现了放大两倍并且翻转。3.旋转函数rotate()rotate()函数可以实现元素的旋转其语法格式如下transform:rotate();其中括号里面需要填写的是旋转的角度。如果为正值表示顺时针旋转为负值时表示逆时针旋转。下面我们通过一个示例来看一下示例代码!DOCTYPE html html head meta charsetutf-8 title/title style typetext/css div{ width: 100px; height: 100px; background-color: blue; border: 1px solid black; color: red; margin: 30px auto; } #rotate:hover{ transform: rotate(45deg); } /style /head body div idrotate /div /body /html4.倾斜函数skew()skew函数可以实现元素的倾斜效果语法格式如下transform:skew(x,y);其中x表示x轴的倾斜角度y表示y轴的倾斜角度。我们通过一个示例来看一下示例代码!DOCTYPE html html head meta charsetutf-8 title/title style div{ width: 100px; height: 100px; background-color: aqua; margin: 50px auto; } #skew:hover{ transform: skew(45deg,20deg); } /style /head body div idskew/div /body /html3.CSS3动画我们经常需要使用一些动画让我们的网页看起来更有趣在CSS3中animation动画就可以实现这样的效果。当然我们要使用animation动画我们要先定义一个keyframes规则用来描述动画的关键帧即动画的开始和中间的状态然后再绑定到元素上来。1.定义动画关键帧语法格式如下keyframes animation-name{ form{ 定义起始状态 } to{ 结束状态 } }我们还可以用百分比来指定语法格式如下keyframes animation-name{ 0%{ 起始状态 } 50%{ 中间状态 } 100%{ 结束状态 } }当然我们也可以添加别的百分比来指定别的关键帧。2.调用动画keyframes创建完动画后需要用CSS3动画属性绑定到元素上才能产生效果。我们接下来来看一下CSS3中的经常使用的属性animation-name:这里是一个键值通过keyframes 该键值{ 每帧画面 }从0%帧~n%帧的动作变化注后面详细说明animation-duration:一轮动画总时间s或msanimation-timing-function:补间动画规则注后面详细说明animation-delay:动画是否延时播放延时多少s或msanimation-iteration-count:动画是否循环循环多少次无限循环是“infinite”animation-direction:正向播放完再逆向播放是“alternate”只正向播放是“normal”animation-play-state:控制动画运行或暂停暂停是“paused”运行是“running”一般是通过js来控制这个属性animation-fill-mode:属性规定动画在播放之前或之后其动画效果是否可见。效果在keyframes 中设定其实基本上和CSS的过渡一样。下面我们来通过一个示例来看一下示例代码!DOCTYPE html html head meta charsetutf-8 title/title style typetext/css .animated-box{ width: 1200px; text-align: center; animation: slideIn 10s ease-in-out infinite, colorChange 8s ease-in-out infinite; } keyframes slideIn{ 0%{ transform: translateX(0%); } 50%{ transform: translateX(30%); } 100%{ transform: translateX(0%); } } keyframes colorChange{ 0%{ color: antiquewhite; } 50%{ color: black; } 100%{ color: red; } } /style /head body div classanimated-box h2zero point/h2 /div /body /html我们现在学完了那我们现在来一个全部的练习示例代码!DOCTYPE html html head meta charsetutf-8 title/title link relstylesheet hrefcss/style.css / typetext/css /head body nav a href#home首页/a a href#news文学艺术/a a href#contact人文社科/a a href#abount少儿书籍/a a href#abount教育考试/a /nav div classcity-nav-header div classcity-nav-list a href# img srcimg/icon-001.png alt /好书推荐网/a div classcity-nav-left dl dd a href# classarrowimg srcimg/icon-002.png alt /文学艺术/a /dd dd a href#img srcimg/icon-003.png alt /人文社科/a /dd dd a href#img srcimg/icon-004.png alt /少儿书籍/a /dd dd a href#img srcimg/icon-005.png alt /教育学习/a /dd dd a href#img srcimg/icon-006.png alt /资格考试/考研/a /dd dd a href#img srcimg/icon-007.png alt /其他图书/a /dd /dl /div /div div classcity-nav-item a href# i/i 推荐书籍 /a a href#学习包/a a href# stylecolor: #;直播课堂/a a href#视频中心/a a href#云阅读/a a href#题库/a /div /div div classcity-slide div classcity-slide-header a classprev hrefjavascript:void(0) /a a classnext hrefjavascript:void(0)/a /div div classcity-slide-body/div /div div classmain div classviwe div classhover h2ChantGpt:会记人触手可及的“AI助手/h2 p52.8元/p /div img srcimg/t1.png alt / /div div classviwe div classhover h2富有的习惯/h2 p21.6元/p /div img srcimg/t2.png alt / /div div classviwe div classhover h2博弈论/h2 p19.9元/p /div img srcimg/t3.png alt / /div div classviwe div classhover h2资本论/h2 p158元/p /div img srcimg/t4.png alt / /div div classviwe div classhover h2产业数字化/h2 p39.5元/p /div img srcimg/t5.png alt / /div div classviwe div classhover h2芯片战争/h2 p58元/p /div img srcimg/t6.png alt / /div /div div classfenye a8条/a a hreflt;lt;/a a href classon1/a a href2/a a href33/a a href4/a a href5/a a href6/a a hrefgt;gt;/a /div /body /html 按照惯例我们的代码和素材依然上传到[Githtb](https://github.com/yanjikang/web-)