017常见网页布局_网页布局代码-程序员宅基地
一、常见的布局方式
1、第一种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常见网页布局1</title>
<style>
.top{
height: 200px;
background-color: #bfbfcc;
text-align: center;
line-height: 200px;
margin-bottom: 10px;
}
.banner{
height: 100px;
background-color: #bfbfcc;
text-align: center;
line-height: 100px;
margin-bottom: 10px;
}
.main{
height: 600px;
background-color: #bfbfcc;
text-align: center;
line-height: 600px;
margin-bottom: 10px;
}
.footer{
height: 300px;
background-color: #bfbfcc;
text-align: center;
line-height: 300px;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="main">main</div>
<div class="footer">footer</div>
</body>
</html>
2、第二种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常见网页布局1</title>
<style>
.top{
height: 200px;
background-color: #bfbfcc;
text-align: center;
line-height: 200px;
margin-bottom: 10px;
}
.banner{
height: 100px;
background-color: #bfbfcc;
text-align: center;
line-height: 100px;
margin-bottom: 10px;
}
.main{
height: 600px;
background-color: transparent;
text-align: center;
line-height: 600px;
margin-bottom: 10px;
}
.main .left{
float: left;
width: 35%;
height: 600px;
background-color: #bfbfcc;
text-align: center;
line-height: 600px;
}
.main .right{
float: right;
width: 64%;
height: 600px;
background-color: #bfbfcc;
text-align: center;
line-height: 600px;
}
.footer{
height: 300px;
background-color: #bfbfcc;
text-align: center;
line-height: 300px;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
3、第三种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常见网页布局1</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
/* 只要是通栏的盒子(和浏览器一样宽) 不需要指定宽度 */
.top{
height: 50px;
background-color: #bfbfcc;
line-height: 50px;
text-align: center;
margin-bottom: 10px;
}
.banner{
width: 980px;
height: 150px;
background-color: #bfbfcc;
line-height: 150px;
text-align: center;
margin: 0 auto;
margin-bottom: 10px;
}
.box-t{
width: 980px;
height: 150px;
background-color:#transparent;
margin: 0 auto;
margin-bottom: 10px;
}
.box-t li{
float: left;
width: 237px;
height: 150px;
background-color: #bfbfcc;
margin-right: 10px;
}
.box-b{
width: 980px;
height: 350px;
background-color:transparent;
margin: 0 auto;
margin-bottom: 10px;
}
.box-b li{
float: left;
width: 237px;
height: 350px;
background-color: #bfbfcc;
margin-right: 10px;
}
.box-t .last,.box-b .last{
margin-right: 0px;
}
.footer{
height: 300px;
background-color: #bfbfcc;
line-height: 300px;
text-align: center;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="box-t">
<ul>
<li></li>
<li></li>
<li></li>
<li class="last"></li>
</ul>
</div>
<div class="box-b">
<ul>
<li></li>
<li></li>
<li></li>
<li class="last"></li>
</ul>
</div>
<div class="footer">footer</div>
</body>
</html>
二、浮动布局注意点
浮动和标准流的父盒子搭配。
先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置
一个元素浮动了，理论上其余的兄弟元素也要浮动。
一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。
浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.
智能推荐
驱动（设备驱动程序）到底是个什么玩意儿 stm32裸机驱动 linux平台总线设备驱动 USB驱动(usb driver)就是USB设备的接口驱动程序_stm32.驱动程序是什么意思-程序员宅基地
文章浏览阅读1.6k次。自己的总结我们在写stm32的裸机项目时，是怎么写一个iic驱动和IIC设备驱动的，要写哪些内容？1.配置iic总线对应的引脚GPIO，2.iic是数据传输协议，所以要写实现IIC的读写函数，3.然后就是写iic设备的驱动，也就是调用IIC总线的读写函数实现设备的读写函数。4.一般情况下写设备驱动时，要先写设备初始化等等对比linux的平台总线驱动模型写得很好的一篇文章----------一定要看原文链接：https://blog.csdn.net/pengliang528/article_stm32.驱动程序是什么意思
JAVA框架-程序员宅基地
文章浏览阅读783次，点赞18次，收藏20次。springboot是工具集,轻量级,整合了其他框架,方便开发,减少了配置约定大于配置Mybatis是一款持久层框架（Dao）框架，支持持久化SQL、存储过程及高级映射。Mybatis避免了几乎所有JDBC代码和手动设置参数以及获取结果集。MyBatis 可以使用简单的 XML 或注解来配置和映射原生信息，将接口和 Java 的 POJOs(Plain Ordinary Java Object,普通的 Java对象)映射成数据库中的记录。且有缓存机制,可以提高查询效率。
ROS系统中从零开始部署YoloV4目标检测算法（3种方式）_detection_msgs-程序员宅基地
文章浏览阅读5k次，点赞8次，收藏143次。1 封装darknet框架为dll方式暂略2 封装TensorFlow或pytorch框架为dll方式暂略3 调用OpenCV中DNN模块方式3.0 需求说明在ROS系统下创建一个package目标检测程序，订阅realsense传感器的RGB流，进行行人检测，然后将检测结果信息发布出去。包和节点名称定义：该目标检测package名称为：detection_pkg 开展目标检测的节点名称为：yolo4 发布检测结果的节点名称为：yolo4_result接口定义：目标_detection_msgs
Windows共享文件夹与Iphone传输文件_iphone共享文件夹只读-程序员宅基地
文章浏览阅读5.8k次。文章目录Windows共享文件夹与Iphone传输文件一 Windows设定共享文件夹1.1 创建共享文件夹1.2 文件操作设置1.3 Windows-PC IP地址1.4 Windows-PC 登陆用户名和密码1.5 网络类型选择1.6 防火墙二 Iphone设定2.1 连接与PC机同一网段内2.1 打开文件，点击右上角三个点2.3 选择连接服务器2.4 登陆PC机账户和密码，点击下一步2.5 登陆成功之后，可以操作Windos系统下分享的共享文件夹内容Windows共享文件夹与Iphone传输文件_iphone共享文件夹只读
JWT工具类-程序员宅基地
文章浏览阅读5.1k次，点赞6次，收藏19次。学习jwt笔记_jwt工具类
PEFT LoraConfig参数详解-程序员宅基地
文章浏览阅读2.9k次，点赞2次，收藏7次。参数高效微调 (PEFT) 可以使预训练模型高效适应下游应用，而无需微调所有模型参数。PEFT 支持广泛使用的大型语言模型低秩适应 (LoRA)。为了从预训练的 Transformer 模型创建 LoRA 模型，我们导入并设置 LoraConfig。例如，NSDT在线工具推荐：让我们回顾一下 LoraConfig 中的参数。_loraconfig
随便推点
VBA使用PING测试网络连接_vba ping ip-程序员宅基地
文章浏览阅读3.4k次，点赞4次，收藏9次。Ping是测试网络连接的一个常用命令，可以向特定的目的主机（某个IP）发送 ICMP（Internet Control Message Protocol 因特网报文控制协议）Echo 请求报文，根据返回数据包的情况，可以了解其有关状态，当然某些服务器可以设置不响应ICMP消息，那么PING这些服务器得到的结果也就无效了。使用VBA开发一下和Internet相关的应用时，经常需要先测试网络主机是否可以触达，这时就需要使用PING命令，但是VBA中并没有提供这个命令，需要借助Wscipt来实现。_vba ping ip
使用Spring+CXF开发WebService-程序员宅基地
文章浏览阅读40次。Apache CXF 提供方便的Spring整合方法，可以通过注解、Spring标签式配置来暴露Web Services和消费Web Services各种类型的Annotation。@WebService和@WebMethod是WSDL映射Annatotion。这些Annotation将描述Web Service的WSDL文档元素和Java源代码联系在一起。@SOAPBind..._spring cxf sch=
STM32Cube学习笔记-SPI通讯_stm32cube spi-程序员宅基地
文章浏览阅读6.6k次，点赞2次，收藏35次。引言 使用STM32Cube开发东西最怕的就是写的代码太多，为什么呢？因为不会写，我深有体会。SPI通讯是一种常用的常用的通讯方式，同步、串行。同步代表着实时性好，串行代表着接线少，很多的设备愿意采用这种方法，废话少说，关于SPI通讯的由来，基本的原理可以百度，我这里介绍用STM32F103ZET6和W25Q64开发SPI通讯。使用的工具SMT32F103的开发板，SPI连接了W25Q64的Flash芯片；用到了串口作为调试；软件是STM32Cube MX，和Keil 5，用到了串口调试助手；._stm32cube spi
java随机生成电话号，邮箱，姓名_java新增用户根据用户账号随机生成一个邮箱-程序员宅基地
文章浏览阅读1.1w次。/** * Created by zhang on 2017/11/6. */public class PhoneNumUtils { /** * 返回手机号码 */ private static String[] telFirst = "134,135,136,137,138,139,150,151,152,157,158,159,130,131,13_java新增用户根据用户账号随机生成一个邮箱
性能领域：你知道的越多，不知道的也就越多-程序员宅基地
文章浏览阅读74次。系统各组件的操作的时间量级差别巨大，表2.2中提供的延时示例，从访问3.5GHz的CPU寄存器的延时开始，阐释了各种操作时间量级的差别。这和学习系统是一样的原理你了解的越多，你就能意识到未知的未知越多，然后这些未知的未知会变成你可以去查看的已知的未知。环境的性能特性会随着时间改变，更多的用户、新的硬件、升级的软件或固件都是变化的因素。当早期的决定阻碍了性能提高的可能性时，这样的选择会变得有问题，例如，选择了非最优的存储架构，或者使用的编程语言或操作系统缺乏完善的性能分析工具。......
Python学习篇(二) Python中的变量和数据类型_python 位变量-程序员宅基地
文章浏览阅读800次。文章目录前言一、二进制与字符编码1.1ASCII码1.2Unicode的汉字编码表二、Python中的标识符合保留字三、变量的定义和使用3.1变量的对此赋值四、Python中常见的数据类型4.1浮点型和布尔类型4.2 字符串类型4.3 Python中的数据类型转换五、Python中的注释前言前面我们讲了Python学习篇(一) 新建Python文件。今天我们继续学习Python中的变量和数据类型一、二进制与字符编码8bit=1byte1024byte=1kB1024kB=1MB1024M_python 位变量