![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML
谁家菜鸟初养成
我打游戏很菜
展开
-
iframe标签 框架
<iframe name="frame1" src="http://www.baidu.com" frameborder="0" width="100%" height="100%"></iframe><!-- src="规定在iframe中显示的文档的url" width="区域宽度" height="区域高度" frame...原创 2019-07-19 15:26:06 · 696 阅读 · 0 评论 -
css实现手风琴效果
起始效果图:每个板块处于展开状态鼠标滑上去效果图滑过的区域放大显示,文字超出则出现滚动条,其他区域处于折叠状态代码实现//CSS部分<style type="text/css">.wrap{ width:600px; height:500px; background:#f0f; margin:20px auto 0;}.wrap>div{...原创 2019-07-22 20:15:54 · 1051 阅读 · 0 评论 -
HTML小案例--导航条实现,鼠标滑过中英文切换/放大模块
小案例一当鼠标滑过每一个小tab,该模块凸起,下边框消失起始状态实现状态代码实现//CSS:.nav2{ width:1000px; height:36px; border-bottom:1px solid #666; margin:50px auto;}.nav2 li{ height:35px; float:...原创 2019-07-22 20:29:32 · 934 阅读 · 0 评论 -
宽高自适应
一、宽高自适应网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是自适应。它能够使网页显示更灵活,可以适应在不同设备、不同窗口和不同分辨率下显示。(1)宽度自适应元素宽度的默认值为auto(2) 高度自适应元素高度的默认值 {height:auto;}二、浮动元素父元素高度自适应(父元素不写高度时,子元素写...原创 2019-07-22 20:33:27 · 233 阅读 · 0 评论 -
HTML+CSS实现定位小案例
定位实现鼠标滑过图片等比例放大,显示在原尺寸图片的上方。起始状态实现状态代码实现<style type="text/css"> img{ border: 0; width: 100px; height: 75px; } .box{ width: 600px; height: 300px; margin: 100px auto;...原创 2019-07-22 20:46:41 · 1423 阅读 · 0 评论 -
a标签定位锚点小案例
实现效果如图:代码实现<body> <div class="box"> <h3>电子相册</h3> <div class="big"> <img src="img/img2/mn1.jpg" alt="" id="a"> <img src="img/img2/mn2.jpg...原创 2019-07-22 20:54:03 · 931 阅读 · 0 评论 -
宽高自适应页面布局小案例
head部分宽高固定left宽度固定,高度自适应right宽高自适应<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href=...原创 2019-07-22 20:58:02 · 679 阅读 · 0 评论 -
自适应的多栏布局
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width:80%; margin:0 auto; background...原创 2019-07-22 21:00:43 · 320 阅读 · 0 评论