欢迎进入广州凡科互联网科技有限公司网站
全国服务热线
4000-399-000
产品中心
网页建站
产品简介
网页建站:前端web搭建及常用web页面书写技巧 一 静态页面和动态页面的区别 1.静态页面 1 客户端使用浏览器发送请求 告诉服务器我需要访问哪一个页面 然后服务器根据用户的需要从
订购热线:4000-399-000
产品介绍

网页建站:前端web搭建及常用web页面书写技巧

一 静态页面和动态页面的区别
1.静态页面
1 客户端使用浏览器发送请求 告诉服务器我需要访问哪一个页面 然后服务器根据用户的需要从文件中取出内容 然后返回给客户端
2 无法连接数据库 每次改变内容都要去操作文件。
2.动态页面
1 还是直接请求 但是会经过web server判断 如果是静态资源就直接请求 如果是动态 就动态拼接 然后再返回。
二 如何搭建静态网站
购买服务- 安装jdk和tomcat以及配置好环境变量- 把web文件放到指定的文件夹下即可

然后直接访问域名加上tomcat的端口号即可。
三 如何搭建动态网站
路线不一样 方法可能也不一样 如果是spring框架 就打包运行即可
补 技术实现
前端 html css js jquery bootstrap(图标) less(优化写css) ajax(数据交互)
后端 SpringBoot(框架) myBatis(或者JDBC操作数据库) Thymeleaf模板引擎
四 前端页面的基础知识
1 一个页面的内容都不是写死的 而是通过ajax动态请求过来的 以淘宝首页为例 淘宝首页的源代码去掉只有1000多行的代码 而淘宝页面的数据全是动态请求得到的 这样做在以后需要修改数据时 只需要通过管理系统去修改数据库就行 对前端的页面几乎不用操作。 动态页面
补: 定位的相关解释
CSS 有三种基本的定位机制 普通流、浮动和绝对定位。
除非专门指定 否则所有框都在普通流中定位。也就是说 普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
1.CSS position 属性
static
元素框正常生成。块级元素生成一个矩形框 作为文档流的一部分 行内元素则会创建一个或多个行框 置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状 它原本所占的空间仍保留。 相对于上一个没有定位的元素进行定位

absolute
元素定位后生成一个块级框 而不论原来它在正常流中生成何种类型的框。
脱离文本流 用如果重叠用z-index来设置z轴方向上的显示优先级
绝对定位的元素的位置相对于最近的已定位祖先元素 如果元素没有已定位的祖先元素 那么它的位置相对于最初的包含块。
fixed
元素框的表现类似于将 position 设置为 absolute 不过其包含块是视窗本身。(也是脱离文本流 但是他是对于窗口定位 就是一直固定在某个位置)

浮动
浮动的框可以向左或向右移动 直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中 所以文档的普通流中的块框表现得就像浮动框不存在一样。
当把框 1 向右浮动时 它脱离文档流并且向右移动 直到它的右边缘碰到包含框的右边缘

当框 1 向左浮动时 它脱离文档流并且向左移动 直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中 所以它不占据空间 实际上覆盖住了框 2 使框 2 从视图中消失。

如果把所有三个框都向左移动 那么框 1 向左浮动直到碰到包含框 另外两个框向左浮动直到碰到前一个浮动框。

如果包含框太窄 无法容纳水平排列的三个浮动元素 那么其它浮动块向下移动 直到有足够的空间。如果浮动元素的高度不同 那么当它们向下移动时可能被其它浮动元素“卡住”

子元素浮动 父元素清除浮动

.clearfix:after{ content: ; display: block; clear: both;}

2 通过添加一个class来实现特定的效果


这是淘宝的商品类型选着实现 就是通过点击事件 给点击的当前这个节点添加一个tb-selected类实现的。

在比如淘宝的商品详情模块

上面是通过添加selected类实现 下面是通过display:none实现。

五 权值问题
1 demo演示
2 权值表

!important 行间样式 id class | 属性 标签选择器 通配符 权重!important 正无穷行间样式 1000id 100calss | 属性 | 伪类 10标签|伪元素 1通配符 0255进制

六 简单轮播图实现

 !DOCTYPE html html lang en head meta charset UTF-8 meta name viewport content width device-width, initial-scale 1.0 title 轮播图 /title style .box{ width: 600px; height: 400px; margin-top: 300px; margin-left: 500px; position: relative; } .box img{ width: 600px; height: 400px; } ul li{ transition: 2s; position: absolute; opacity: 0; } .box ul{ list-style: none; } /style /head body div class box ul li img src ./img/1.jpg alt /li li img src ./img/2.jpg alt /li li img src ./img/3.jpg alt /li li img src ./img/4.jpg alt /li li img src ./img/5.jpg alt /li /ul /div script src ./jquery-3.5.1.js /script script $(function(){ var cnt 0; var timer setInterval(function(){ $( ul li ).css( opacity , 0); $( ul li ).eq(cnt).css( opacity , 1); cnt (cnt 1) % 5; }, 2000); }); /script /body /html 
点赞 12 评论 18
操作系统进程完成时间,周转时间,带权周转时间, 平均周转时间, 带权平均周转时间计算 4072
博弈论 Nim游戏 Staircase Nim阶梯尼姆 POJ 1704 Georgia and Bob 2620
联系我们
广州凡科互联网科技有限公司
全国服务电话:4000-399-000
传真:021-45545458
Q Q:2639601583
公司地址:广州市海珠区工业大道北67号凤凰创意园
我要订购
* 联系人
* 联系电话
电子邮件
QQ
* 产品名称
* 采购意向
温馨提示: 请填写采购的产品数量和产品描述,方便我们进行统一备货。
咨询热线:4000-399-000


Copyright © 广州凡科互联网科技有限公司 版权所有 粤ICP备10235580号
全国服务电话:4000-399-000   传真:021-45545458
公司地址:广州市海珠区工业大道北67号凤凰创意园