div/css居中页面不变尺寸

最新推荐文章于 2021-06-04 10:03:08 发布
最新推荐文章于 2021-06-04 10:03:08 发布
阅读量785 收藏
点赞数 1
分类专栏： Web 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dopamy_BusyMonkey/article/details/53007586
版权

1、项目目录：

 

2、test.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link href="css/style.css" type="text/css" rel="stylesheet" />
    <link href="css/customfont.css" type="text/css" rel="stylesheet"/>
    <script src="js/jquery-3.1.1.slim.js"></script>
</head>
<body class="backbround">
    <div class="all-div">
        <div class="navigation-list">
            <div class="navigation-list-title">
                <img src="img/navigation-title.jpg" style="margin: 55px">
            </div>
            <div class="navigation-list-column">
                <p class="navigation-list-font">Page1</p>
            </div>
            <div class="navigation-list-column">
                <p class="navigation-list-font">Page2</p>
            </div>
            <div class="navigation-list-column">
                <p class="navigation-list-font">Page3</p>
            </div>
            <div class="navigation-list-column">
                <p class="navigation-list-font">Page4</p>
            </div>
        </div>
        <div class="auto-resize-left"></div>
        <div class="navigation-div"></div>
        <div class="auto-resize-right"></div>
    </div>
    <script>
        $(".navigation-list").css("width",document.body.scrollWidth+"px");
        $(".backbround").css("height",screen.height+"px");
        $(".all-div").css("width",document.body.scrollWidth+"px")
        $(".navigation-div").css("width",document.body.scrollWidth-300+"px");
    </script>
</body>
</html>

 

 

 

 

 

3、customfont.css

 

.navigation-list-font {
    height: 30px;
    text-align: center;
    font-size: 20px;
    font-weight: bolder;
    color: darkorange;
    margin: 60px;
    padding: 10px;
}

 

 

 

 

 

4、style.css

 

.backbround {
    background-image: url('../img/driver.png');
    background-attachment:fixed;
    background-repeat:no-repeat;
    background-size:cover;
    -moz-background-size:cover;
    -webkit-background-size:cover;
    margin:0;
    padding:0;
    height: 2000px;
}

.all-div {
    height: 2000px;
}

.auto-resize-left {
    width: 150px;
    height: 2000px;
    float: left;
}

.auto-resize-right {
    width: 150px;
    height: 2000px;
    float: right;
}

.navigation-div {
    height: 2000px;
    float: left;
}

.navigation-list {
    height:170px;
    background-color: black;
    filter:alpha(opacity=40);
    -moz-opacity:0.4;
    -khtml-opacity: 0.4;
    opacity: 0.4;
}

.navigation-list-title {
    width: 30%;
    height: 170px;
    background-color: black;
    float: left;
}

.navigation-list-column {
    width: 15%;
    height: 170px;
    background-color: black;
    float: left;
}

 

 

 

 

 

BusyMonkey
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css实现div宽度自适应，宽高保持等比缩放
丑小鸭变黑天鹅的博客
03-29 1万+
css实现div宽度自适应，宽高保持等比缩放1、方式一2、方式二3、方式三4、方式四 1、方式一 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .square { width: 30%; height: 30vh; border: 1px so
C#性感美女动态图Gif转代码效果展示
02-27
C#性感美女动态图Gif转代码效果展示
html设置div大小位置不变,不固定宽度和高度的情况下CSS调整div居中的方法总结...
weixin_36459547的博客
06-04 578
很多新手在写css的时候经常遇到的一个问题，当div没有固定的宽度或者高度的时候，如何才能让div水平或者垂直居中显示。如果div有固定宽度的话，用padding，margin都很容易实现。方法有很多种。不过经常遇到这种div没有固定的宽度高度的情况，我们就不能用margin,padding设置固定的距离了。这个问题让很多人头疼。而怎么样才能让这个div居中显示呢？其实这种情况解决的办法也是有很多...
css+div
变是永远不变的......
06-29 1743
div+css是web设计标准，它是一种网页布局方法。它可以实现网页页面内容与表现分离。          css是层叠样式表（Cascading Style Sheets）的缩写，用于定义HTML元素的显示形式。          样式规则：由一个选择器后跟一个声明块组成。声明块是一个大容器，由大括号中间的部分组成，声明块中间的空间会被忽略。          举例如下： #m_cate
用CSS让未知高度内容垂直方向居中
weixin_34179762的博客
08-07 75
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo</title> <style type="text/css"> #outer{ width:500px...
CSS在固定宽高的div内实现垂直居中的实例详解
12-30
很多朋友的做法是头部加一个padding或者margin，这样，里面内容显得貌似是居中了，但是假如内容变化，这样头部的固定padding或者margin，始终不变。造成了垂直方向不会居中！ 我们知道，假如下面一个div CSS Code...
CSS图片响应式 垂直水平居中
01-19
我看最近微博流行CSS居中技术，我看了几编资料写的都不多好，于是抽时间把相关资料整合了，具体内容如下。 点击此处下载源码 效果展示： 要求: 1.尽可能兼容更多浏览器，这里兼容到ie7,ie6不支持max-*就不考虑了。 ...
DIV+CSS 滑动门技术的简单例子
10-31
在这个例子中，我们将详细解析如何使用DIV+CSS实现滑动门效果。 首先，我们来看CSS样式部分。这里定义了几个关键的类和ID： 1. `#zishu li`: 这个选择器应用于`<ul>`下的所有`<li>`元素，设置它们为浮动元素，并...
css实现的让图片垂直居中的方法
09-25
在网页设计中，让图片垂直居中是一项常见的需求，特别是在图片尺寸不固定，而外部容器有固定尺寸的情况下。本文将介绍三种使用CSS实现图片垂直居中的方法。 **方法一**： 这种方法利用了`display:table`和`display:...
json的理解（JavaScript 对象标记语言）
奋斗的小菜鸡的博客
04-13 998
一、简单介绍JSON(JavaScript Object Notation, JS 对象标记) (JavaScript 对象标记语言) 是一种轻量级的数据交换格式。它基于 ECMAScript 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。 JSO
python爬虫小程序之爬百度美女图片
11-09
python爬虫小程序之爬百度美女图片，有需要的可以下载
自定义ProgressBar使用.9.png图片出现遮盖现象的解决
KennyKung的APP专栏
04-20 972
自定义ProgressBar使用.9.png图片出现遮盖现象的解决 当使用xml配置ProgressBar的样式的时候,请注意以下加粗部分: //普通图片                         ------------------------------------------------------
怎样使网页页面CSS样式不随浏览器大小的变化而变化呢？
热门推荐
有问题可关注公众号：前端研究院 后台输入问题回复
06-27 1万+
网页中每个标签的style的width，height设置为具体数值，不要用百分比！ 例如： 错误：<body style="width:100%;height:100%">（F） 正确：<body style="width:1376px;height:768px">（T） 感谢分享https://blog.csdn.net/huangshulang1234/a...
Cordova 打包签名 Android release app 过程详解及cordova创建app
weixin_34146986的博客
03-15 465
很久之前就想写这篇博客，但是一直没有时间，今天抽空来整理一下，总结一下cordova的创建、打包、签名apk。对于cordova所需的打包环境，如node,cordova的安装，这里就不再多说，度娘上有很多... 1.cordova命令创建一个项目 cordova create testApp com.test.app 这里testAPP...
美女图片采集器 (源码+解析)
luoganlin的专栏
07-19 1655
前言: 有一段时间没写博客了, "持之以恒"徽章都暗了, 实在不该。 前一段确实比较忙, ...小小地给自己的懒找个借口吧。 大二即将结束, 学习iOS也有一段时间了。今天抽点时间, 开源一个前几天刚上传的App里面的一个功能, RT, 美女图片采集器。   美女.. 相信没有人不喜欢吧, 基于此, 这个小Demo应运而生。 注:  本文正在参加博
css之背景图固定大小不变、不重复、充满整个页面
饭
04-06 6096
一、 想要css背景图固定大小不变，在对应属性加上一下代码就可以了： background-size: cover; background-repeat: no-repeat; background-attachment:fixed;
div位置大小不随浏览器变化而变化
MissMiss55的专栏
03-13 9361
#main-content {                 margin: 0 30px 0 260px;                 padding: 40px 0 0 0;                 position:absolute;绝对                 top: 30px; 固定上部                 left: 3%; 左边留成百分比
springmvc hadoop nginx ffmpeg 在线转码实现点播服务demo
BusyMonkey
04-07 7687
springmvc hadoop nginx ffmpeg 在线转码实现点播服务demo
vue实现如下效果：有多个div，点击哪个div就改变它的css样式，而其他div样式不变
最新发布
07-08
你可以使用Vue的条件渲染和绑定样式的特性来实现这个效果。首先，在Vue组件中定义一个data属性，用来保存被点击的div的索引值。然后，使用v-for指令遍历多个div，并绑定点击事件。在点击事件处理函数中，更新data属性的值为当前点击的div的索引值。最后，使用v-bind指令动态绑定样式，判断当前div的索引值是否与data属性的值相等，如果相等则添加对应的样式。 以下是一个示例代码： ```html <template> <div> <div v-for="(div, index) in divs" :key="index" :class="{ active: activeIndex === index }" @click="changeActive(index)" > {{ div.text }} </div> </div> </template> <script> export default { data() { return { activeIndex: null, // 初始化时没有选中的div divs: [ { text: 'Div 1' }, { text: 'Div 2' }, { text: 'Div 3' }, // 更多的div... ] }; }, methods: { changeActive(index) { this.activeIndex = index; } } }; </script> <style> .active { /* 添加选中样式 */ } </style> ``` 在上面的代码中，被点击的div会添加一个名为"active"的样式类，你可以在style标签中定义"active"类的样式，以达到改变样式的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值