- 博客(24)
- 收藏
- 关注
RSS订阅原创 用HTML，css,boostrap写一个综合大型购物网站
用HTML，css,boostrap写一个综合大型购物网站首先来看看页面的效果：有需要的可以参考首先是首页index:<!DOCTYPE html><html><head> <!-- 先把bootstrap里面的css、jQuery和bootstrap.js三个文件按顺序加载进来 --> <meta charset="utf-8"> <title>Mrsjiang</title>
2020-05-31 22:47:52
3951
6
原创 css3实现背景图片半透明内容不透明的方法
css实现背景图片半透明内容不透明的方法上一个博客做登陆的页面是遇到的问题，突然想使用这种背景图片透明，而内容不透明的效果，这里我就说一说我的两个思路吧。效果展示：内容半透明内容不透明最常见的做法事设置元素的opacity,这种设置出来的效果就是内容与背景都事半透明的，严重影响视觉效果，达不到上述的效果方法一：设置background-color:rgba(),这种方式只能设置背景颜色的透明度。如果是背景是图片的上面的方法将就不适用，以下提供两个方法：第一个就是利用伪元素::before,
2020-05-14 16:34:57
2723
原创 bootstrap布局完成热卖商品模板任务3
bootstrap布局完成热卖商品模板任务3首先来看看效果图喜欢拿去：这些所有的布局都是由bootstrap提供使用栅格布局： 1. 最外层<div>标签自定义类名.hot，用于批量设置其子元素的样式。 2. 在最外层<div>下添加<div>标签并使用类.container实现整体布局，在div.container添加栅格系统，三个<div&...
2020-05-08 16:07:00
1070
原创 响应式设计Bootstrap任务二
响应式设计Bootstrap任务二应用框架做网页快速，并且十分的方便，节约时间。首先看看最终的效果效果：里面的布局全部都是由bootstrap提供，咱们直接应用，这样节省了许多时间，对自己不满意样式可以进行更改直接进行覆盖，修改部分样式。我们来看看引入bootstrap框架。使用 BootCDN 提供的免费 CDN 加速服务（同时支持 http 和 https 协议）<!-- 最新...
2020-05-08 11:49:28
388
原创 用bootstrap做出面包线导航栏
用bootstrap做出面包线导航栏首先看看效果图这个项目的实现主要是直接套用了bootstrap框架，进行相应的改正，bootstrap框架的相应下载和引用。详细请参考https://www.bootcss.com/中文网有详细的介绍和使用方法。对自己需要改正的一些属性可以用代码进行覆盖上述代码，也可以改bootstrap的样式源文件。下面看看详细的实验代码：<!DOCTYPE...
2020-05-05 20:05:07
589
原创 点击文字改变背景图片
点击文字改变背景图片首先看看效果图这个项目的实现的效果主要是应用了JavaScript的点击事件触发了函数，改变了，背景的图片。主要应用了点击事件onclick点击事件触发了函数。onclick当用户点击某个对象时调用的事件句柄onfocus元素获得焦点onkeydown某键盘按键被按下onkeyup某个键盘按键被松开onabort图像的加载...
2020-05-05 19:38:53
655
原创 html5新增的视频播放器基本布局
html5新增的视频播放器属性布局首先给大家看看最终实验的图形当鼠标放到视频上面时候，显示所有小按钮，当鼠标移走就不显示所有小按钮。视频的属性是：video标签<video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video>video：html5新增属性属性值描述...
2020-05-05 17:57:24
1185
原创 Flex 布局的语法
Flex 布局的语法传统的布局一般都是盒子模型，:display 属性+position属性+float属性。它的布局写起来非常的繁琐。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。一、什么是Flex布局？Flex 是Flexible Box 的缩写，意为‘弹性布局...
2020-05-03 22:44:35
190
原创 html点击文字改变网页背景图片
HTML点击文字改变网页背景图片先看看效果图：想要实现上述的效果很简单的，用上JavaScript通过标签元素id，用document.getElementById().style设置标签元素的css属性有两种方法：法一：只需要改变一个css属性：document.getElementById("idname").style.属性名="样式";法二：多个css属性同是改变：v...
2020-04-21 17:59:45
3068
原创 10种动态进度条用css3实现
用css做的10种动态进度条，喜欢可以直接去用话不多说先看效果图：实现上图的，最主要的就是应用了css动画属性@keyframes和animation属性结合应用下面看看语法：@keyframes@keyframes animationname {keyframes-selector {css-styles;}}animationname必需的。定义animation的名称...
2020-04-21 17:26:19
1880
原创 响应式个人信息页面项目7-2用html5+css3
项目7-2社交网站个人信息页面首先来看看最终的效果图形：当网页缩小到一定的范首先要把第一张图片的框架搭建起来，应用浮动布局，和百分比布局都是可以的；有了基础的框架在进行进一步的美化，当做出第一张图的效果时，在上面的基础上加上媒体查询设置效应的参数就可以达到上述的效果图形。媒体查询的语法:@media mediatype and|not|only (media feature) { ...
2020-04-21 16:25:43
3083
原创 用html制作3d旋转正方形相册
用html制作3d旋转正方体相册首先给大家看看效果图：动态效果，就接了几张图片给大家看做这个实验最主要的就是用到了HTML5的动画的 animation 属性 和@keyframes规则说先看看keyframers的规则语法定义：@ keyframes animationname{ kkeyframes-selector{} }animation的属性书写语法如下：anim...
2020-04-02 11:27:57
4885
2
原创 用html写的表单能进行相应的验证，应用正则表达式
html5css3 的表单能进行相应的验证，应用正则表达式首先话不多说先看看效果图：在未输入的情况下它会自动检测出错误并提示信息，在输入正确的（输入合法的意思）情况下会给你提示你的输入合法正确，若没有或者忘记填，它也无法提交，并且会提示给你相关的信息下面来看看图片：下面来看看实现这个实验所需要的重点所要掌握的一些基本属性：首先是input标签：type属性：类型描述...
2020-04-01 23:04:54
649
1
原创 深入理解transition属性、transform属性实现过渡及变形效果
深入理解transition属性、transform属性实现过渡及变形效果话不多说先看效果图a当鼠标移到第一幅图片上面产生了边框过渡为圆角边框的效果，阴影效果；主要代码： border-radius: 50%; box-shadow: 0 0 20px 5px white;b当鼠标移到第二幅图片上面产生了逐渐放大的过渡的效果，阴影效果：主要代码：transform: scale(...
2020-03-24 19:30:10
737
原创 CSS 中transform属性的应用详解
transform 属性向元素应用 2D 或 3D 转换语法格式：transform: none|transform-functions;值描述none不进行转换。matrix(n,n,n,n,n,n)2D 转换，使用六个值的矩阵matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)3D 转换，使用 16 个值的 4x4 矩阵。...
2020-03-22 21:50:12
337
1
原创 用css、HTML绘制简单图形从简单图形到难;包括五角星、爱心、、三角形、正方形多种样式等。
用css、HTML绘制简单图形从简单图形到难首先话不多说先看效果，如果用的上在详细看看如何实现以上效果主要应用了一下属性： background:transparent;设置颜色颜色透明语法格式：border-radius: 1-4 length|% / 1-4 length|%;border-radius；添加圆角边框|值描述length定义圆角的形状。...
2020-03-22 21:38:25
1165
原创 项目2-2软文推广页面
*## 软文推广页面首先给大家看效果图：背景是我自己随便找了一张背景图黄颜色一种比较亮的图，所以文字应该选取黑色这样看起来使人舒服：下面来详细说说上述图的效果如何做出来的：首先将整个图可以看成是一个section标签，然后在进行嵌套div的盒子标前签。这个网页页面一共用到了以下类容首先是设置了一一种给新的字体（One Web, Any Device）属性如下：List item@f...
2020-03-17 15:06:03
4043
原创 标题如何利用CSS让表格宽度不因为内容字数过多而撑大
标题如何利用CSS让表格宽度不因为内容字数过多而撑大其实只需要在表格的样式style中增加以下属性table-layput:fixed;word-wrap:break-wrod;word-break:break-all;下面来详细的介绍以下每个的含义word-break 属性：规定自动换行的处理方法。值含义normal使用浏览器的默认换行规则break...
2020-03-12 16:53:13
1038
原创 用HTML写一个超级课程表页面
用HTML写一个超级课程表页面首先给大家展示一下效果图，他家可以根据自己的喜好，换成自己喜欢的颜色看到这个图可以把它肯成一个大的表格来进行做，将一些单元格进行相应的合并就可以达到上面所期望的图片效果，然后在用css选择器进行颜色的修饰，最终可以达到上图的效果。下面我来一起看下代码部分：<!DOCTYPE html><html><head> ...
2020-03-09 09:43:28
4778
4
原创 css选择器详细介绍
css选择器通用选择器标签选择器类选择器ID选择器（只能用一次）属性选择器并集选择器后代选择器子代选择器（选择最近临近的子代为直接后代）兄弟选择器伪选择器...
2020-03-07 15:17:28
127
翻译 用HTML5+CSS3绘制HTML5的图标
用HTML5+CSS3绘制HTML5的图标首先看一下最终的效果图：然后对上述图片进行拆分分析：HTML5的实现步骤：图1：定位出整个页面的背景区域“bg”,并实现背景光束。图2：定义logo样式，并画出盾牌的左半边。图3：画出盾牌的右半边。图4：画出浅橘色区域。图5：画出“5”的左半边。图6：画出“5”的右半边。图7：用色块遮盖多余的部分。图8：在盾牌上方添加“HTML”图片...
2020-03-05 11:09:20
374
原创 用HTML+CSS做简单的网页传智播客设计学院简介
传智播客设计学院简介最终网页的效果图下面是代码：做这种网页有很多方法，我是主要用的div标签来将它划分为多个部分，进行div嵌套，从而实现上面的效果，具体看下面代码：<!DOCTYPE html><html><head> <title>员工表</title> <style type="text/css">...
2020-03-05 10:39:55
3852
原创 用HTML+CSS做员工信息登记表
用HTML+做员工信息登记表##首先看一下效果##下面是代码实现部分<!DOCTYPE html><html><head> <title>biaodan</title> <style> .one{height: 20px;width:200px;} .two{height: 20px;width:100px;...
2020-03-05 10:18:34
7258
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人