- margin: auto;
- display: flex;
小物件的css
margin: auto;
就可以達到小物件的置中了
2019年7月15日 星期一
2019年6月11日 星期二
2019年5月28日 星期二
iframe框架語法
iframe
方法一：用iframe放入要植入的網頁
<div class=””>
<iframe src=”/public/sport/html/index.html” frameborder=”0" marginheight=”0" marginwidth=”0" scrolling=”no” width=”100%” height=”870" style=”width: 1000px; display: block; margin: 0 auto;” allowtransparency=”true”></iframe>
</div>
寫法
<iframe src="嵌入目標" width="250px" height="300px" frameborder="0" scrolling="no"></iframe>
寫法
<iframe src="嵌入目標" width="250px" height="300px" frameborder="0" scrolling="no"></iframe>
方法二：function放入
主頁
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8">
<title>demo演示</title>
</head>
<html>
<head>
<meta charset=”UTF-8">
<title>demo演示</title>
</head>
<body>
<!--顶部导航 -->
<header></header>
<! — 顶部导航 over - ->
<!--顶部导航 -->
<header></header>
<! — 顶部导航 over - ->
<!- -中部主体- ->
<p>···代码省略···</p>
<! — -中部主体 over- ->
<p>···代码省略···</p>
<! — -中部主体 over- ->
<! — footer — ->
<footer></footer>
<! — footer over — ->
<footer></footer>
<! — footer over — ->
<script src=”/js/jquery.min.js”></script>
<script>
/*导入头部和尾部*/
$(document).ready(function(){
$(“header”).load(“/header.html”);
$(“footer”).load(“/footer.html”);
});
</script>
</body>
</html>
<script>
/*导入头部和尾部*/
$(document).ready(function(){
$(“header”).load(“/header.html”);
$(“footer”).load(“/footer.html”);
});
</script>
</body>
</html>
footer頁面
<!--footer.html页面-->
<footer>
<ul class="g-flex">
<li class="g-flex-auto"><a href="#" class="i-b">首页</a></li>
<li class="g-flex-auto"><a href="#" class="i-b">分类</a></li>
<li class="g-flex-auto"><a href="#" class="i-b">订单</a></li>
<li class="g-flex-auto"><a href="#" class="i-b">我的</a></li>
</ul>
</footer>
方法三：php語法
<?php
require ('header.php');
?>
<?php $this->beginBody() ?>
<?= $content ?>
<?php $this->endBody() ?>
<?php
require ('footer.php');
?>
<footer>
<ul class="g-flex">
<li class="g-flex-auto"><a href="#" class="i-b">首页</a></li>
<li class="g-flex-auto"><a href="#" class="i-b">分类</a></li>
<li class="g-flex-auto"><a href="#" class="i-b">订单</a></li>
<li class="g-flex-auto"><a href="#" class="i-b">我的</a></li>
</ul>
</footer>
方法三：php語法
<?php
require ('header.php');
?>
<?php $this->beginBody() ?>
<?= $content ?>
<?php $this->endBody() ?>
<?php
require ('footer.php');
?>
2019年5月9日 星期四
改變寬度，就會改變內容
https://codepen.io/mukiwu/pen/OPWxjg
$(document).ready(function(){
if(matchMedia) {
var mq = window.matchMedia( "(min-width: 500px)" );
//
mq.addListener(WidthChange);
//
WidthChange(mq);
}
function WidthChange(mq){
if (mq.matches) {
// window width is at least 500px
$(".a").text("match");
}
else {
// window width is less than 500px
$(".a").text("nomatch");
}
}
})
---
也可以這樣寫
https://codepen.io/mukiwu/pen/OPWxjg
$(document).ready(function(){
if(matchMedia) {
var mq = window.matchMedia( "(min-width: 500px)" );
//
mq.addListener(WidthChange);
//
WidthChange(mq);
}
function WidthChange(mq){
if (mq.matches) {
// window width is at least 500px
$(".a").text("match");
}
else {
// window width is less than 500px
$(".a").text("nomatch");
}
}
})
---
也可以這樣寫
if (mq.matches) {
// window width is at least 768px
$("header nav ul").show(100);
}
else {
// window width is less than 768px
2019年5月2日 星期四
input css
去掉藍色hover邊框
原文網址：https://kknews.cc/zh-tw/digital/ogn3q4m.html
改變光暈顏色
給input加上 如下樣式， focus或者 hover等 根據問題改動即可
input:focus {
outline: 0;
-webkit-box-shadow: inset000rgba(0,0,0,.075),000#333;
box-shadow: inset000rgba(0,0,0,.075),000#333;
}
原文網址：https://kknews.cc/zh-tw/digital/ogn3q4m.html
改變光暈顏色
input[type=text]:focus,input[type=password]:focus,textarea:focus{ transition:border linear .2s,box-shadow linear .5s; -moz-transition:border linear .2s,-moz-box-shadow linear .5s; -webkit-transition:border linear .2s,-webkit-box-shadow linear .5s; outline:none;border-color:rgba(241,39,242,.75); box-shadow:0 0 8px rgba(241,39,232,.5); -moz-box-shadow:0 0 8px rgba(241,39,232,.5); -webkit-box-shadow:0 0 8px rgba(241,39,232,3);}
訂閱：
文章 (Atom)