標籤彙整:width()

Magic Line

參考範例:CSS-TRICK

ul#nav
 li.current ABOUT
 li.2 STORY
 li INFO
 li TICKETS
 //li#line
ul
 position: relative

li
 display: inline-block
 padding: 0px
 margin-right: 10px
 color: #a3a3a3
 transition-duration: 0.5s
 font-size: 26px
 position: relative
 &:hover
  color: #000
//下底線樣式
#line
 position: absolute
 //初始位置(可以去console帶函數算出來)
 left: 40px
 width: 90px
 border-bottom: 3px solid #000
//加入下底線
$("#nav").append("<li id='line'></li>");

//滑鼠觸發
//hover(移進去的動作, 移出後的動作);
$("li").hover(
 //移入
 function() {
 $("#line").stop().animate({
 left: $(this).position().left,
 width: $(this).width()
 })
 },

 //移出
 function() {
 $("#line").stop().animate({
 left: "40px",
 width: "90px"
 })
 }
);

原生版本

var nav = document.querySelector("#nav");
var createLine = document.createElement("li");
createLine.id = "line";

nav.appendChild(createLine);
var now = document.querySelector("#now");
var li = document.querySelectorAll(".li");
for (i = 0; i < li.length; i++) {
 li[i].addEventListener("mouseover",
 function() {
 createLine.style.left = this.offsetLeft + "px";
 createLine.style.width = this.offsetWidth + "px";
 }
 );
 li[i].addEventListener("mouseout",
 function() {
 createLine.style.left = now.offsetLeft + "px";
 createLine.style.width = now.offsetWidth + "px";
 }
 )
}

Display

網頁縮小後格式不跑掉的方法

狀況

寫好的網頁一經視窗縮小,內容排版全部亂掉。

改善

視窗縮小後內文格式不動,但下方產生寬度卷軸。

方法

  1. 在大框架與所有內容中間新增一個div,變成大框架-父元素,新div-中元素,所有內容-子元素
  2. 修改新div的CSS
    div{
    width: 網頁格式能維持的最小寬度px;
    margin-right: auto;
    margin-left: auto;
    }
    

範例

CODEPEN