python_note
  • Introduction
  • My Python
    • Anaconda
    • argparse
    • datetime
    • json
    • logging
    • numpy
    • open
    • openCC
    • pandas & csv
    • Socket & SocketServer
    • re
    • yaml
    • smtp
    • 物件操作
    • unittest
    • 線程
    • prettytable
    • IO
    • pycurl
    • sys
    • pickle
    • auto-python-to-exe
    • cython
    • nuitka
  • Crawler
    • Urllib & Requests
      • User-agent
      • Percent-Encoding
      • mail code
    • Selenium
    • TCP & UDP
    • 控制字符(control character)
  • Web Development
    • Flask
      • RESTful api
      • Template
      • blueprint
    • Django
      • 環境佈署(windows)
    • 檢查Port
    • Apache
    • 使用者行為
    • jQuery
    • 壓力測試
    • DataTable
    • Bootstrap
    • CSS
    • JavaScript
    • Chart.js
  • Deep Learning
    • Keras 設定
    • RNN
    • LSTM
  • Test
    • T-Test
  • 資料結構
    • Hash
    • 時間複雜度
  • NLP
    • N-gram
    • CKIP
    • 中文轉數字
    • CRF
    • Mutual Information
    • 模糊比對
  • Linebot
    • Heroku
    • 圖文選單
    • channel
  • Linux
    • 常用指令
    • shell script
    • sshfs
    • ssh
    • nodejs & npm
    • debug
  • GCP
    • app engine
    • ssh(gcp)
    • gsutil
    • brabrabra
    • Load Balancer
    • k8s
  • Database
    • mysql
    • elasticsearch
      • Query
      • Backup and Restore
      • elasticdump
      • es2csv
      • ELK
    • mongodb
      • install
      • authentication
      • pymongo
    • sql server
  • go
    • Swarm
  • Docker
    • Kitematic
    • Dockerfile
    • Swarm
  • Git
  • 其他
    • USB軟體保護
    • Windows效能監視器
  • Blockchain
Powered by GitBook
On this page
  • DIV內元素置底
  • margin vs padding
  • display:block 與 display:inline

Was this helpful?

  1. Web Development

CSS

PreviousBootstrapNextJavaScript

Last updated 5 years ago

Was this helpful?

物件位置

文字效果

import方式

滑動確認按鈕

[CSS] 圖片在div內水平置中

超連結語法

常用語法

<!-- 使div有超連結 -->
<div id="header" style="cursor:pointer;" onclick="location.href='http://www.blog.moocss.com/';"> 

<a href="#" style="text-decoration:none;">隱藏超連結底線範例</a>

文字css
text-align:left; //向左對齊
text-align:right; //向右對齊
text-align:center; //置中
text-align:justify; //使左右對齊本文
text-align:inherit; //繼承父元素的 text-align 屬性

至底區域

DIV內元素置底

第一層DIV設定 :position:relative;

第二層DIV設定

      position:absolute;

      bottom:0px;

      right:0px;

margin vs padding

margin-top:設定上邊界距離。
margin-left:設定左邊界距離。
margin-right:設定右邊界距離。
margin-bottom:設定下邊界距離。

padding:上距離 右距離 下距離 左距離;
四個方位的內距都不一樣,分開設定。
padding:上方與下方距離 左方與右方距離;
上下兩個方位的內距相同,左右兩的方位的內距相同。
padding:四個方位的距離;
四個方位的內距全部相同,一次設定。
padding:上方距離 左方與右方距離 下方距離;
左右兩邊的內距相同,分別設定上方與下方的內距。

內距:元素與邊框的距離

外距:元素間的間距

display:block 與 display:inline

display:block - 區塊,元素會以區塊方式呈現,除非設定 position 或 float。 block 的特性是可以設定高度(height)、寬度(width)、上方與下方距離,像是 div、p、ul、li 均屬 block。

display:inline - 所有文字或圖片均不換行,也就是全部都會是同一行的意思。inline 高度與寬度都不能設定,文字或圖片所佔的寬度就是他的寬度,像是 span、a、input、img、em 均屬 inline。

https://sites.google.com/site/coolteazhuanti/css/qiang-zhi-shui-ping-pai-lie-bu-huan-xing
http://css-teach.7happy.com.tw/css-position.php
https://muki.tw/tech/css-div-center/
https://blog.xuite.net/jason_kuso/kuso/37092113-%E3%80%90html%E3%80%91%E6%96%87%E5%AD%97%E5%90%84%E5%BC%8F%E6%95%88%E6%9E%9C
https://blog.xuite.net/han31079/b747/13869483-CSS%E5%9F%BA%E7%A4%8E%E8%AA%8D%E8%AD%98
https://www.wfublog.com/2018/01/css-slide-on-off-swith.html
http://stockwfj3.pixnet.net/blog/post/116998882
https://blog.xuite.net/han31079/b747/13940573-%E5%9F%BA%E6%9C%AC%E9%80%A3%E7%B5%90%E8%AA%9E%E6%B3%95
https://www.wibibi.com/info.php?tid=CSS_a_%E9%80%A3%E7%B5%90%E6%A8%A3%E5%BC%8F%E6%95%88%E6%9E%9C%E8%A8%AD%E8%A8%88
https://www.w3schools.com/howto/howto_css_fixed_footer.asp
http://zackwang.blogspot.com/2015/10/cssdiv.html
https://pinkyvivi.pixnet.net/blog/post/1131260
http://www.webtech.tw/info.php?tid=37